ReactJS中如何为checkbox设置值？选中值打印正常但勾选状态不更新

问题核心原因有两个 #

• 错误使用value属性控制checkbox勾选状态：checkbox的勾选状态由checked属性控制，而非value，value仅用于存储该checkbox对应的值
• 直接修改了state中的数组引用：splice、push都是直接修改原数组的方法，React state要求不可变更新，直接修改原数组会导致React检测不到数据变化，可能不触发组件重渲染，因此勾选状态不会更新
• 类型不匹配：你初始化selectedTags时将tag.id转成了字符串存储，但判断是否选中时直接用数字类型的tag.id做匹配，会因为类型不一致导致匹配失败

修正后的代码示例 #

1. 修正addTags方法，改为生成新数组更新state

addTags(e) {
  console.log("id****************", e.target.id);
  let id = e.target.id;
  // 基于原数组生成新数组，不直接修改原state
  let selectedTags = [...this.state.selectedTags];
  if (selectedTags.includes(id)) {
    var index = selectedTags.indexOf(id)
    selectedTags.splice(index, 1);
  } else {
    selectedTags.push(id);
  }
  console.log("id****************selectedTags", selectedTags);
  this.setState({
    selectedTags: selectedTags
  })
},

2. 修正render中checkbox的属性配置

<input
  type="checkbox"
  // 统一转成字符串做匹配，和初始化存入的类型保持一致
  checked={selectedTags.includes(tag.id.toString())}
  id={tag.id}
  onChange={this.addTags} 
/>

内容的提问来源于stack exchange，提问作者D-Nis