以下是一些标题选项，重点关注问题方面和 ReactJS 上下文： 1. **React 中的受控输入与非受控输入：如何避免“切换状态”警告？** 2. **重新

ReactJS 中的受控与不受控输入错误

使用 React 组件时，了解受控输入和不受控输入之间的区别非常重要。默认情况下，输入是不受控制的，这意味着它们的值由 DOM 管理。然而，当我们在输入上设置 value 属性时，它就变成了受控输入，这意味着它的值由 React 管理。

如果组件最初将不受控输入渲染为受控输入而没有定义初始值，React 将发出像您提到的那样的警告：
“组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制（反之亦然）”。

在提供的代码中：

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 *"
      />
      <span style={{color: "red"}}>{this.state.errors["name"]}</span>
    </div>
  )
}

出现问题是因为在构造函数中， fields 被初始化为空对象： fields: {} 。这意味着最初， this.state.fields.name 将是未定义的。结果，输入字段将不受控制。但是，当用户输入值时，状态会更新，使输入成为受控组件。这种不一致的行为会触发 React 警告。

可能的解决方案：

1. 设置初始默认值： 使用以下命令初始化构造函数中的字段名称的默认值，例如“name”：“”。这确保输入字段作为具有定义值的受控组件启动。
2. 使用短路评估：将输入的 value 属性设置为以下内容： value={this.状态.字段.名称 || ''}。如果 this.state.fields.name 未定义，则其计算结果为空字符串，确保即使没有定义的默认值，输入字段也会按受控方式启动。

以上是以下是一些标题选项，重点关注问题方面和 ReactJS 上下文： 1. **React 中的受控输入与非受控输入：如何避免“切换状态”警告？** 2. **重新的详细内容。更多信息请关注PHP中文网其他相关文章！