React 中基于数组的复选框：受控组件与不受控组件答案

【问题标题】：Checkbox based on array in React: controlled vs uncontrolled componentReact 中基于数组的复选框：受控组件与不受控组件
【发布时间】：2018-09-13 15:30:54
【问题描述】：

我在状态中有一组值，例如：

['foo', 'bar', 'baz'] // in this.state.values

这个值数组用于控制复选框的状态。因此，有三个复选框，每个复选框都有一个 onChange 属性，如下所示：

<input
   type="checkbox"
   name={name}
   onChange={this.handleChange}
/>

handleChange 方法只是在数组中添加或删除值。

太天真了，我以为我可以检查数组中是否存在该值，以了解复选框是否被选中。所以我这样做了：

<input
   type="checkbox"
   name={name}
   checked={this.state.values.find(e => e === name)}
   onChange={this.toggle}
/>

但这会返回一个警告：

警告：组件正在将复选框类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

我不确定是否理解，因为我认为组件仍然受到控制...checked 条件是基于状态的，所以我认为它可以工作。我怎样才能通过仍然继续使用该数组作为参考来避免此警告？

【问题讨论】：

这是在您取消选中该框时还是在初始渲染时发生的？
我们能看到你的整个组件吗？我不太了解结构。您是否正在动态创建这些复选框？很可能是的，那么当您的 handleChange 方法从数组中删除一个值时，您是否只呈现提醒复选框？如果是这样，那么如何再次向数组添加值？

标签： javascript reactjs

【解决方案1】：

您应该使用array.includes，而不是在数组中查找。您的问题与 React 中的 this 错误相关，该错误已在新版本中删除。

我已经为你创建了一个沙盒。

【讨论】：

【解决方案2】：

您是否为状态设置了初始值？如果不是，那可能就是问题所在。如果 this.state 尚未设置，那么您的输入最初是不受控制的。像这样设置组件的初始状态：

  constructor(props) {
    super(props);
    this.state = { values: ['foo', 'bar', 'baz'] };
  }

【讨论】：