在 React 中设置复选框属性

1. React 中的复选框
2. 在 React 中设置复选框 check 属性

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>
  }
}

使用 defaultProps 的另一个优点是它们只代表默认值。用户仍然可以与应用程序交互并更改 checked 属性的状态。

将 checked 属性设置为 true 或 false 意味着不允许用户更改其状态。