设置复选框“ check” 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正在更改要控制的复选框类型的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。确定在组件的使用寿命期间使用受控或不受控制的输入元素。更多信息：[一些没用的文档页面，我读了几次都没用]

所以我决定创建另一个包装每个复选框的组件，我得到了：

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

现在选中 的物业直接存在

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

这会使警告消失，但现在无法重置已选中的 设置为默认值。所以我尝试使用方法 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.

确实如此。但是该复选框保持原始状态。
现在，我离开了这个丑陋的警告，我使用的是已选中。
如何解决此问题，以便消除警告？

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 <，则会出现问题。 / code>复选框的属性为 null 或 undefined 。

这些是JS中的错误值，但是 React会将值 null 视为未设置属性。由于未选中复选框的默认状态，因此一切正常。如果然后将 checked 设置为 true ，React会认为该属性突然存在！这是当React将您从不受控制的状态切换为受控制的状态时，因为现在存在 checked 道具。

Those are a "falsely" 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将注册您的选中的属性，其值为 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.

我也遇到了这个问题，我也阅读了关于受控组件的文档服务器时间无济于事，但我终于弄清楚了，所以我想我分享。另外，由于版本15.2.0 会触发普通输入，通过设置 value ，而复选框通过设置为 checked 进行初始化，而不管其 value 属性，这增加了一些混乱。

I had this problem too and I, too, read the docs about controlled-components serveral 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.

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