react input的几个坑

时间:2022-03-04 15:10:34

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进行控制即为最佳实践。