我在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该属性直接存在于我的状态中。
checked
这会产生相同的警告,因此我尝试使用defaultChecked:
defaultChecked
<input type="checkbox" defaultChecked={this.state.checked} onChange={this.onChangeAction.bind(this)} />
这使警告消失,但是现在它无法将checked值重置为默认值。因此,我尝试使用该方法componentWillReceiveProps,通过这种方式,我可以确定我的状态是正确的,this.state.checked正确的并且该组件再次呈现。
componentWillReceiveProps
this.state.checked
确实如此。但是该复选框保持原始状态。现在我离开了那个丑陋的警告,我正在使用checked。我该如何解决这个问题,以便消除警告?
我在想,也许有一种方法可以强制重新渲染组件,以便它捕获defaultChecked并使用新值。但是我不知道该怎么做。也许 只 取消此组件的警告?那可能吗?也许还有其他事情可以做?
如果checked将复选框的属性设置为null或,则会出现问题undefined。
null
undefined
这些是JS中的“错误”值,但是React对待的值null好像根本没有设置该属性。由于未选中复选框的默认状态,因此一切正常。如果您随后将其设置checked为trueReact,则认为该属性突然存在!这是当React将您从不受控制切换为受控制的时候,因为现在道具checked已经存在。
true
在您的示例中,您可以通过更改checked={this.settings[setting]}为来消除此警告checked={!!this.settings[setting]}。注意双爆炸(!!)。他们将转换null或undefined以false(离开true单独的),等反应过来将你的注册checked用的价值属性false,并以受控的表单组件开始。
checked={this.settings[setting]}
checked={!!this.settings[setting]}
!!
false
我也遇到了这个问题,我也没有阅读有关受控组件服务器时间的文档,但是最终我发现了这一点,所以我想分享一下。同样,由于15.2.0版触发了普通输入由set进行控制value,而复选框却被set初始化为由set进行控制,而checked不管其value属性如何,这增加了一些混乱。
value