HOWTO · React

在 React 中设置复选框属性

设置默认选中值的过程可能会令人困惑。在本文中，我们将解释常见问题并帮助你编写更好的复选框

作者 Irakli Tchigladze发布于 2021-12-04更新于 2023-10-12

本页内容

JSX 中定义的表单不仅仅是简单的 HTML 元素。表单应该存储和传输内部数据，因此它们需要一个内部状态来管理它。

让我们以 HTML 复选框为例。在自然状态下，HTML 复选框可以存储 checked 属性的值。但是，如果你正在开发应用程序，将数据存储在元素的内部状态中是不够的。你需要在 React 应用程序的内部状态中存储 checked 属性的值，以便你可以在整个应用程序中引用它。

React 中的复选框

React 中的复选框元素必须遵循一定的规则。10 年前，有条件地为 HTML 元素创建新属性可能是可以接受的。这与 React 中的最佳实践建议背道而驰。创建的任何复选框元素都必须带有或不带有 checked 属性。

在没有 checked 属性的情况下启动的复选框元素是不受控制的：

<input type="checkbox" name="uncontrolled"></input>

使用 checked 属性定义的复选框元素受到控制：

<input type="checkbox" checked={true} name="controlled"></input>

<input> 元素必须作为受控或非受控组件启动。一个常见的错误是将 checked 属性设置为 null 或 undefined 值。JavaScript 编码人员可能希望这些值自动转换为 false 布尔值，但 React 的工作方式不同。

令人困惑的错误

当 React 遇到任何具有 null 或 undefined 值的属性时，它会忽略该属性并且不渲染它。稍后，如果初始值变为 true，则会再次出现 checked 属性，这会触发从不受控制的组件更改为受控制的组件。

React 会抛出一个错误，告诉你组件必须初始化为受控或非受控。如果复选框组件是在没有 checked 属性的情况下定义的，则以后无法添加。

很多人不知道在复选框上设置 checked 属性会将其初始化为受控组件。这就是为什么他们对错误消息感到困惑的原因，该错误消息如下：

Warning: AwesomeComponent is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

在 React 中设置复选框 `check` 属性

一旦你理解了问题，修复它就很容易了。如果你打算创建一个受控复选框组件，你必须确保 checked 属性的计算结果为 true 或 false。这可以通过设置 defaultProps 属性并将 checked 属性默认设置为 false 来实现。这是一个代码示例：

class App extends Component {
  constructor(props) {
    super(props) this.state = {}
  }
  render() {
    console.log('App started');
    this.defaultProps = {
      checked: false
    } return <input type = 'checkbox' checked = {this.checked} name =
                            'controlled'>< /input>
  }
}