如何避免ReactJS中的“不受控输入到受控输入转换错误”？

ReactJS 中不受控输入到受控输入转换错误

React 警告不要在不受控和受控输入元素之间切换。当输入字段最初自由地接受用户输入（不受控制），然后开发人员稍后尝试通过状态控制其值（受控制）时，通常会发生此错误。

代码片段：

错误由以下代码说明：

<code class="javascript">constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
}

onChange(field, e){
  let fields = this.state.fields;
  fields[field] = e.target.value;
  this.setState({fields});
}

render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields["name"]}
        onChange={this.onChange.bind(this, "name")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
    </div>
  )
}</code>

根本原因：

在此代码中，问题在于字段为的初始状态初始化为空对象。当组件首次呈现时， this.state.fields.name 未定义，使输入成为不受控制的组件。但是，当用户输入值时，字段会更新，从而使输入受到控制。

可能的解决方案：

要解决此错误，有两个选项：

1. 使用默认值初始化字段：

   使用默认值定义初始状态的字段：

   <code class="javascript">this.state = {
     fields: {name: ''}
   }</code>

2. 使用短路求值：

   在 value 属性中使用短路求值，当 this.state.fields.name 未定义时提供默认值：

   <code class="javascript"><input value={this.state.fields.name || ''} /></code>

以上是如何避免ReactJS中的“不受控输入到受控输入转换错误”？的详细内容。更多信息请关注PHP中文网其他相关文章！