猜猜这段代码会发生什么事?
1 2 3 4 5 |
{!state.isEditing ? ( <button type="button" onClick={() => this.setState({isEditing: true})}>修改</button> ) : ( <button form="form-1" type="submit">确定</button> )} |
以为仅仅是切换下按钮?
其实是会执行下面的流程
- 当
isEditing
为false
的时候,点击button
, isEditing
变成了true
- 重新 render,在 virtualDOM 进行 diff 的时候,给
button
添加了type=submit
以及form='form-1'
#form-1
表单被意外的submit
了
来个 DEMO 验证下 继续阅读“React Key 在非数组、队列场景下的应用”