javascript - (codesandbox) 如何让所有标签 `checkbox` 和 `first option` 默认被选中

Question

在 ReactJS 中，我正在映射一些数据并尝试让所有标签复选框及其第一个值在默认情况下被选中，并且还能够取消选中复选框，这也将取消选中选定的单选按钮值。

代码框链接

https://codesandbox.io/s/youthful-grass-0fc5x

我可以让复选框默认被选中，但无法让它们的值被选中

toggleChange = (e, index) => {
   console.log(e.target, index);
   this.setState({
     isChecked: !this.state.isChecked
   });
};

handleChange = (selectedId) => {
  const { selectedItems } = this.state

  this.setState(state => ({
     selectedItems: [...state.selectedItems, {
       selectedId
     }]
  }))
}

Answer 1

我对你的codesandbox做了一些修改:https://codesandbox.io/s/exciting-williamson-pjkw9 .

当您使用复选框或单选按钮时，您应该注意 checked 属性而不是 value。您肯定可以使用 value 将一些数据传递给事件处理程序，但是 checkiness(我的奇怪词之一)的状态由 checked 支柱。如果它是 true - 项目被选中，反之亦然。

还有一件事，checked prop 被转换为 bool 值，所以如果传递给它一个空字符串，它将被取消选中，如果字符串不为空 - 元素将被选中。