ReactJS 中处理不受控到受控输入转换警告
当组件将不受控输入元素转换为受控输入元素时，ReactJS 会向开发人员发出警告。此错误与以下消息相关联：
警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制（反之亦然）。决定在组件的生命周期内使用受控或非受控输入元素。
了解原因
当组件的状态将输入字段初始化为不受控（即缺少受控值属性）但随后设置其值，从而有效地将其转换为受控输入时，就会发生错误。
示例代码
考虑以下代码片段：
<code class="javascript">constructor(props) {
super(props);
this.state = {
fields: {}
}
}
...
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")}
type="text"
refs="name"
placeholder="Name *"
/>
</div>
)
}</code>在此示例中，状态最初是一个空对象，使得输入字段不受控制。但是，当设置字段值时，输入将受到控制，从而导致警告。
可能的解决方案
要解决此问题，请考虑以下解决方案：
<code class="javascript">this.state = { fields: { name: '' } }</code><code class="javascript">value={this.state.fields.name || ''}</code>通过实施这些解决方案，您可以确保您的输入元素保持一致的状态，避免不受控到受控输入转换错误。
以上是如何修复 ReactJS 中的'不受控到受控输入转换”警告？的详细内容。更多信息请关注PHP中文网其他相关文章！
