react input的几个坑

【react input的几个坑】

1、input标签中设置value后，input进入controlled模式，valuechange由自动变为手动，导致input无法编辑。如：

　　<input value="xxx"/> // 导致无法编辑

　解法：使用代码来对input.value赋值即可。如 this.nameInput.value="xxx"

2、defaultValue只在第一次绘制时会启用。这意味着，如果首次绘制为""，而后面绘制为"value"，则defalutValue始终为""。如：

　　<input defalutValue={this.props.name}> 

　　如果第一次this.props.name为""，第二次及以后为“value”，则input始终显示""。

 

　　鉴于以上两个巨坑，使用input时，不要通过jsx来操作input的value、defaultValue属性。通过代码直接对.value进行控制即为最佳实践。