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

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 值并使用它。但我不知道该怎么做。也许 仅 针对该组件抑制警告？那可能吗？也许还有其他事情可以做？

原文由 Apollo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

这些是 JS 中的“虚假”值，但是 React 将值 null 视为根本没有设置该属性。由于复选框的默认状态未选中，因此一切正常。如果你将 checked 设置为 true React 认为这个属性突然出现了！这是 React 显示你从不受控切换到受控的时候，因为现在存在道具 checked 。

在您的示例中，您可以通过将 checked={this.settings[setting]} 更改为 checked={!!this.settings[setting]} 来消除此警告。注意双爆炸（ !! ）。 They will convert null or undefined to false (and leave true alone), so React will register your checked 值为 false 的属性并从受控表单组件开始。

我也遇到了这个问题，我也多次阅读了 有关受控组件的文档 但无济于事，但我终于弄明白了，所以我想我会分享。此外，由于 版本 15.2.0 正常输入被触发以通过设置 value 来控制，而复选框被初始化为通过设置 checked 控制，而不管它们的 value 属性，这增加了一些混乱。

原文由 amoebe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Amoebe 的回答是正确的，但我认为有比双银行（ !! ）更清洁的解决方案。只需为 Checkbox 组件的 checked 添加一个值为 false 的 defaultProps 属性：

 import React from 'react';

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

Checkbox.defaultProps = {
  checked: false
};

export default Checkbox;

原文由 Klofi 发布，翻译遵循 CC BY-SA 3.0 许可协议