猜猜这段代码会发生什么事？
|
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 在非数组、队列场景下的应用
