设置复选框“检查"React 中的属性 [英] Setting a checkbox "check" property in React

问题描述

我在 React 和复选框方面遇到了一个非常烦人的问题.我正在使用的应用程序需要一个复选框列表，这些复选框代表保留在后端的设置.可以选择将设置恢复到原始状态.

I am having a very annoying issue with React and checkboxes. The application I am working with requires a list of checkboxes that represent settings that are persisted in the back-end. There is an option to restore the settings to their original state.

起初，我创建了一个组件，它有一个像设置地图这样的对象.每个设置都有一个键和一个布尔值.因此:

At first, I created a component that has an object like a map of settings. Each setting has a key and a boolean value. Hence:

{
    bubbles: true,
    gregory: false
}

表示为:

<input type="checkbox" value="bubbles" checked="checked" />
<input type="checkbox" value="gregory" />

现在，React 似乎对复选框应该如何工作一无所知.我不想设置复选框的值，我想要checked"属性.

Now, it seems React is ignorant about how a checkbox is supposed to work. I don't want to set the checkboxes' values, I want the "checked" property.

然而，如果我尝试这样的事情:

Yet, if I try something like this:

<input
    type="checkbox"
    value={setting}
    checked={this.settings[setting]}
    onChange={this.onChangeAction.bind(this)}
/>

我收到此警告:

警告:AwesomeComponent 正在更改复选框类型的不受控制的输入以进行控制.输入元素不应从不受控制切换到受控制(反之亦然).决定在组件的生命周期内使用受控或非受控输入元素.更多信息:[一些无用的文档页面，我读了几次都无济于事]

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. More info: [some useless docs page I read several times to no avail]

所以我决定创建另一个组件来包装每个单独的复选框，我得到了这个:

So I decided to create another component to wrap each individual checkbox and I got this:

<input
    type="checkbox"
    checked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

现在 checked 是直接存在于我的状态中的属性.

Now the checked is a property present directly in my state.

这会产生相同的警告，所以我尝试使用 defaultChecked:

This yields the same warning, so I tried using defaultChecked:

<input
    type="checkbox"
    defaultChecked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

这使得警告消失，但现在它无法将 checked 值重置为默认值.所以我尝试使用 componentWillReceiveProps 方法，这样我很确定我的状态是正确的，this.state.checked 是正确的，组件再次渲染.

Which makes the warning disappear, but now it is unable to reset the checked value to the default one. So I tried playing with the method componentWillReceiveProps, this way I am quite sure my state is correct, this.state.checked is correct and the component renders again.

而且确实如此.但复选框保持原样.现在我留下了那个丑陋的警告，我正在使用 checked.我该如何解决这个问题，让警告消失?

And it does. But the checkbox remains as it was originally. For now I left that ugly warning and I am using checked. How do I fix this thing so the warning goes away?

我在想也许有一种方法可以强制重新渲染组件，因此它捕获新的 defaultChecked 值并使用它.但我不知道该怎么做.也许抑制这个组件的警告仅?那可能吗?也许还有其他事情可以做?

I was thinking that perhaps there is a way to force-re-render the component, so it captures the new defaultChecked value and uses it. But I don't know how to do that. Perhaps suppress the warning only for this component? Is that possible? Perhaps there is something else that can be done?

推荐答案

如果将复选框的 checked 属性设置为 null 或 undefined 会出现问题.

The problem arises if you set the checked property of your checkbox to null or undefined.

那些是假的"JS 中的值，但是 React 处理 null 就好像该属性根本没有设置.由于复选框的默认状态未选中，所以一切都会正常工作.如果然后将 checked 设置为 true React 认为该属性突然存在！这是当 React 数字从不受控制切换到受控制时，因为现在存在 checked 属性.

Those are a "falsy" values in JS, however React treats a value of null as if the property was not set at all. Since the default state of a checkbox is unchecked, everything will work fine though. If you then set checked to true React thinks the property suddenly comes into existence! This is when React figures you switched from uncontrolled to controlled, since now the prop checked exists.

在您的示例中，您可以通过将 checked={this.settings[setting]} 更改为 checked={!!this.settings[setting]} 来消除此警告代码>.注意双爆炸 (!!).它们会将 null 或 undefined 转换为 false(并保留 true)，因此 React 将注册您的 checked 属性，值为 false，并从受控表单组件开始.

In your example you can get rid of this warning by changing checked={this.settings[setting]} to checked={!!this.settings[setting]}. Notice the double bang (!!). They will convert null or undefined to false (and leave true alone), so React will register your checked property with a value of false and start off with a controlled form component.

我也遇到了这个问题，而且我也阅读了关于控制组件几次都无济于事，但我终于想通了，所以我想我会分享.此外，由于 version 15.2.0 正常输入被触发以通过设置 来控制value，而复选框通过设置 checked 进行初始化，而不管它们的 value 属性如何，这增加了一些混乱.

I had this problem too and I, too, read the docs about controlled-components several times to no avail, but I finally figured it out, so I thought I'd share. Also, since version 15.2.0 normal inputs are triggered to be controlled by setting value, while checkboxes are initialized as controlled by setting checked, regardless of their value property, which added a bit to the confusion.

这篇关于设置复选框“检查"React 中的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！