在 React 中设置复选框属性

Irakli Tchigladze 2023年1月30日 2021年12月4日
  1. React 中的复选框
  2. 在 React 中设置复选框 check 属性
在 React 中设置复选框属性

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 属性设置为 nullundefined 值。JavaScript 编码人员可能希望这些值自动转换为 false 布尔值,但 React 的工作方式不同。

令人困惑的错误

当 React 遇到任何具有 nullundefined 值的属性时,它会忽略该属性并且不渲染它。稍后,如果初始值变为 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 属性的计算结果为 truefalse。这可以通过设置 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 属性设置为 truefalse 意味着不允许用户更改其状态。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn