在React中设置复选框“检查”属性

  • Z时代
  • 2024-01-10
  • 分类：问答

我对React和复选框有一个非常恼人的问题。我正在使用的应用程序需要一个复选框列表，这些复选框表示在后端保留的设置。 有一个选项可将设置恢复到原始状态。在React中设置复选框“检查”属性

首先，我创建了一个组件，其中包含一个像设置图一样的对象。每个设置都有一个键和一个布尔值。因此：

{ 
    bubbles: true, 
    gregory: false 
}

是为表示：

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

现在看来阵营是无知一个复选框应该是怎样工作的。我不想设置复选框的值，我想要“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。 我该如何解决这个问题，让警告消失？

我在想，也许有办法强制重新渲染组件，所以它会捕获新的值并使用它。但我不知道该怎么做。也许这个组件禁止警告只有？那可能吗？也许还有别的可以做的事情？

回答：

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

这些是JS中的“错误”值，但是完全是React treats a value of null as if the property was not set。由于复选框的默认状态是未选中状态，所以一切都会正常工作。如果您随后将checked设置为true React认为该属性突然出现！这是React数字从非控制切换到控制的时候，因为现在支持checked存在。

在您的示例中，您可以通过将checked={this.settings[setting]}更改为checked={!!this.settings[setting]}来摆脱此警告。注意双重爆炸（!!）。他们会将null或undefined转换为false（并且只保留true），因此React将注册您的checked属性，其值为false，并以受控表单组件开始。

我也有这个问题，我也读了docs about controlled-components几次无济于事，但我终于明白了，所以我想我会分享。此外，由于version 15.2.0正常输入触发由设置value控制，而复选框被初始化为由设置checked控制，无论其value财产，这增加了一点混乱。

回答：

基本上，defaultChecked意味着你不想控制输入 - 它只是呈现这个值，然后就没有办法控制它。此外，value不应该使用，但checked而不是，所以你的第二个代码应该是正确的。而且你不应该同时使用它们。

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

你能用这种行为创建一个小提琴吗？

回答：

您可以将您的数据的状态，然后利用与个别复选框相关的checked属性的设置状态

{ this.state.data.map(function(item, index) { 
     return (
     <input type="checkbox" checked={item.value} onChange={this.handleChange.bind(this, index)}/> 
    ); 
    }.bind(this)) 
    }

样本数据中的状态是

data: [{name:'bubbles', value: true}, {name:'gregory', value: false}]

JSFIDDLE

回答：

Amoebe的回答是正确的，但我认为比双银行有更清洁的解决方案（!!）。

import React from 'react'; 
const Checkbox = ({checked}) => (
    <div> 
     <input type="checkbox" checked={checked} /> 
    </div> 
); 
Checkbox.defaultProps = { 
    checked: false 
}; 
export default Checkbox;

以上是 在React中设置复选框“检查”属性 的全部内容， 来源链接： utcz.com/qa/257198.html

回到顶部