在 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
属性设置为 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
意味着不允许用户更改其状态。
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