小编典典

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

reactjs

我在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并使用新值。但是我不知道该怎么做。也许
取消此组件的警告?那可能吗?也许还有其他事情可以做?


阅读 2829

收藏
2020-07-22

共1个答案

小编典典

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

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

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

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

2020-07-22