在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正常输入被触发通过设置来控制value,而复选框被初始化为由设置控制checked,而不管它们的value属性如何,这增加了一些混乱.

Answer 2

Amoebe的回答是正确的,但我认为有一个比双银行更清晰的解决方案(!!).只需添加一个defaultProps与值属性false为checked您的CheckBox组件的道具:

import React from 'react';

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

Checkbox.defaultProps = {
  checked: false
};

export default Checkbox;

Answer 3

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

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

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

Answer 4

如果您选择将类组件转换为函数组件，这里是使用钩子的答案......

export default Checklist = () => {
  const [listOfItems, setListOfItems] = useState([
    {name: 'bubbles', isChecked: true},
    {name: 'gregory', isChecked: false}
  ]);

  const updateListOfItems = (itemIndex, isChecked) => {
    const updatedListOfItems = [...listOfItems];
    updatedListOfItems[itemIndex].isChecked = isChecked;
    setListOfItems(updatedListOfItems);
  }

  return (
    {listOfitems.map((item, index) =>
      <index key={index} type="checkbox" checked={item.isChecked} onChange={() => updateListOfItems(index, !item.isChecked)} />
    )}
  )
}