在React中设置一个复选框“ check”属性

Question

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

首先，我创建了一个组件，该组件具有一个类似于设置映射的对象。每个设置都有一个键和一个布尔值。因此：

{
    bubbles: true,
    gregory: false
}

被表示为：

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

现在，React似乎对复选框应该如何工作一无所知。我不想设置复选框的值，我想使用“ checked”属性。

但是，如果我尝试这样的事情：

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

我收到此警告：

警告：AwesomeComponent正在更改要控制的复选框类型的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。确定在组件的使用寿命期间使用受控或不受控制的输入元素。更多信息：[
一些无用的文档页面，我读了几次都无济于事 ]

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

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

现在，checked该属性直接存在于我的状态中。

这会产生相同的警告，因此我尝试使用defaultChecked：

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

这使警告消失，但是现在它无法将checked值重置为默认值。因此，我尝试使用该方法componentWillReceiveProps，通过这种方式，我可以确定我的状态是正确的，this.state.checked正确的并且该组件再次呈现。

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

我在想，也许有一种方法可以强制重新渲染组件，以便它捕获defaultChecked并使用新值。但是我不知道该怎么做。也许 只
取消此组件的警告？那可能吗？也许还有其他事情可以做？

Answer 1

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

这些是JS中的“错误”值，但是React对待的值null好像根本没有设置该属性。由于未选中复选框的默认状态，因此一切正常。如果您随后将其设置checked为trueReact，则认为该属性突然存在！这是当React将您从不受控制切换为受控制的时候，因为现在道具checked已经存在。

在您的示例中，您可以通过更改checked={this.settings[setting]}为来消除此警告checked={!!this.settings[setting]}。注意双爆炸（!!）。他们将转换null或undefined以false（离开true单独的），等反应过来将你的注册checked用的价值属性false，并以受控的表单组件开始。

我也遇到了这个问题，我也没有阅读有关受控组件服务器时间的文档，但是最终我发现了这一点，所以我想分享一下。同样，由于15.2.0版触发了普通输入由set进行控制value，而复选框却被set初始化为由set进行控制，而checked不管其value属性如何，这增加了一些混乱。