为什么我在 ReactJS 应用程序中收到'组件正在更改要控制的文本类型的不受控制的输入”警告？

不受控制和受控制的输入元素：ReactJS 警告指南

ReactJS 建议保持输入元素控制状态的一致性。在某些情况下，您可能会遇到警告：“组件正在更改要控制的文本类型的不受控制的输入。”让我们深入探究原因并探索有效的解决方案。

问题根源

在 ReactJS 中，输入元素可以是受控的，也可以是不受控的。受控输入是其值由组件状态管理的输入，而非受控输入允许用户直接更改其值。当最初声明为不受控的输入后来转换为受控输入时，就会出现问题。

考虑以下代码：

<br>class MyComponent extends React.Component {<br> 构造函数(props) {<pre class="brush:php;toolbar:false">super(props);
this.state = {
  fields: {}
}

}

onChange(field, e){

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

}

render() {

return(
  <div>
    <input
      value={this.state.fields["name"]}
      onChange={this.onChange.bind(this, "name")}
      type="text"
      placeholder="Name *"
    />
  </div>
)

}
}

在此示例中，“name”输入不受控制，因为其值最初未定义 (this.state. fields["name"])，允许用户自由更改。但是，当用户输入值时，onChange 处理程序会设置 this.state.fields.name，从而有效地将输入转换为受控状态。此状态转变会触发警告。

解决问题

要解决警告，您可以：

1. 定义状态中的初始字段：为每个字段声明 this.state.fields 并使用空字符串。这确保了所有输入最初都受到控制。

   <code class="python">class MyComponent extends React.Component {
     constructor(props) {
    super(props);
    this.state = {
      fields: {
        name: '',
      }
    }
     }
   
     // ...
   }</code>

2. 使用短路评估：使用短路评估分配 value 属性，这确保未定义值的计算结果为空字符串。

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

通过实施任一解决方案，您都可以消除错误并确保输入控制状态的一致性。

以上是为什么我在 ReactJS 应用程序中收到'组件正在更改要控制的文本类型的不受控制的输入”警告？的详细内容。更多信息请关注PHP中文网其他相关文章！