Reactjs “设置复选框”；勾选“；反应中的性质

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

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

{
    bubbles: true,
    gregory: false
}

将被表示为：

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

这会使警告消失，但现在无法将选中的

值重置为默认值。因此，我尝试使用方法
component willreceiveprops
，这样我就可以非常确定我的状态是正确的，
this.state.checked
是正确的，并且组件再次呈现

确实如此。但复选框仍保持原来的状态。
现在我留下了那个丑陋的警告，我正在使用
checked
。
我如何修复这件事，使警告消失

我在想，也许有一种方法可以强制重新渲染组件，因此它捕获新的
defaultChecked
值并使用它。但我不知道怎么做。是否仅抑制此组件的警告？可能吗？也许还有别的方法可以做？
基本上，
defaultChecked
表示您不想控制输入–它只是用这个值呈现，然后就没有办法控制它了。另外，不应使用
value
，而应选中
，因此第二个代码应该是正确的。你不应该同时使用它们

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

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

然而，在JS中，这些都是“虚假”的价值观。由于复选框的默认状态是未选中的，因此一切都可以正常工作。如果随后将
checked
设置为
true
React，则认为该属性突然存在！这是您从非受控切换到受控的时候，因为现在已选中的道具已存在

在您的示例中，您可以通过将
checked={this.settings[setting]}
更改为
checked={！！this.settings[setting]}
来消除此警告。请注意双重爆炸（
！！
）。它们将
null
或
undefined
转换为
false
（并将
true
单独保留），因此React将使用
false
值注册您的
checked
属性，并从受控表单组件开始

我也有这个问题，我也读了好几遍都没有用，但我最终发现了这个问题，所以我想我应该和大家分享一下。此外，由于正常输入被触发，通过设置
值来控制，而复选框被初始化为通过设置
选中来控制，而不管它们的
值属性如何，这增加了一点混乱。
Amoebe的回答是正确的，但我认为有一个比双银行更干净的解决方案（
！！
）。只需为复选框组件的
选中的
属性添加一个值为
false
的属性：

import React from 'react';

const Checkbox = ({checked}) => (
  <div>
      <input type="checkbox" checked={checked} />
  </div>
);

Checkbox.defaultProps = {
  checked: false
};

export default Checkbox;

从“React”导入React；
常量复选框=（{checked}）=>(
);
Checkbox.defaultProps={
勾选：假
};
导出默认复选框；
浪费了一个多小时，因为我认为我理解了这个问题，因为React发出了一条非常具体的警告消息。没有。这是一个未定义的变量，稍后将被定义。谢谢。我对这个答案的评价不够。我有条件地添加和删除
checked
属性本身，这在pla中是一个很好的做法在jane HTML的日子里。我花了二十分钟的时间困惑于为什么会出现这个错误消息。ReactJS错误消息真的应该有一个特殊的案例，承认HTML复选框输入的不一致的奇怪性，这样其他人也不会碰到它。难以置信的答案：）这是一个我不知道的好把戏（使用双砰立即转换为布尔值）在函数声明中使用
{checked=false}
怎么样？
<input
    type="checkbox"
    checked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

{   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}]

import React from 'react';

const Checkbox = ({checked}) => (
  <div>
      <input type="checkbox" checked={checked} />
  </div>
);

Checkbox.defaultProps = {
  checked: false
};

export default Checkbox;