如何不指定状态名批量设置ReactJS组件所有现有状态为false？

嘿，我来帮你搞定这个问题！要实现同一时间仅选中一个复选框的效果，核心思路就是先把所有现有状态重置为false，再单独设置当前选中项为true，下面给你两种可行的解决方案：

方案1：基于现有多状态结构修改 #

如果想保留当前每个选项对应一个state键的结构，可以通过遍历state的键来生成全false的状态对象，再覆盖当前选中项：

onSelect = (e) => {
  const selectedId = e.target.getAttribute('data-id');
  
  // 第一步：把所有状态重置为false
  const resetAllStates = Object.keys(this.state).reduce((acc, key) => {
    acc[key] = false;
    return acc;
  }, {});
  
  // 第二步：设置当前选中项为true
  this.setState({
    ...resetAllStates,
    [selectedId]: true
  });
}

注意事项 #

如果你的state里还有其他非复选框相关的状态，上面的代码会把那些也重置为false。这时候建议你提前把所有复选框的id存在一个数组里（比如从数据库获取后保存），只重置这些id对应的状态：

// 假设从数据库获取的复选框id列表
constructor(props) {
  super(props);
  this.checkboxIds = ['a', 'b', 'c']; // 实际项目中替换为数据库返回的数据
  // 初始化状态
  this.state = this.checkboxIds.reduce((acc, id) => {
    acc[id] = false;
    return acc;
  }, {});
}

onSelect = (e) => {
  const selectedId = e.target.getAttribute('data-id');
  
  // 只重置复选框相关的状态
  const resetCheckboxStates = this.checkboxIds.reduce((acc, id) => {
    acc[id] = false;
    return acc;
  }, {});
  
  this.setState({
    ...resetCheckboxStates,
    [selectedId]: true
  });
}

方案2：优化为单状态结构（更推荐） #

其实没必要给每个选项都单独存一个状态，我们可以只维护一个selectedId状态，记录当前选中的复选框id，这样代码更简洁，状态也更易维护：

// 初始化状态，默认没有选中项
state = {
  selectedId: null
};

onSelect = (e) => {
  const selectedId = e.target.getAttribute('data-id');
  // 如果点击的是已选中的选项，就取消选中；否则设置为当前选中项
  this.setState({
    selectedId: this.state.selectedId === selectedId ? null : selectedId
  });
}

render() {
  return (
    <div>
      <SearchResult 
        data-id="a" 
        pName="Duracell 1" 
        onClick={this.onSelect} 
        selected={this.state.selectedId === "a"} 
      />
      <SearchResult 
        data-id="b" 
        pName="Duracell 2" 
        onClick={this.onSelect} 
        selected={this.state.selectedId === "b"} 
      />
      <SearchResult 
        data-id="c" 
        pName="Duracell 3" 
        onClick={this.onSelect} 
        selected={this.state.selectedId === "c"} 
      />
    </div>
  )
}

方案优势 #

• 状态结构更简洁，不管有多少个复选框，只需要维护一个selectedId
• 逻辑更清晰，判断选项是否选中只需要对比selectedId和当前选项的id
• 避免了多状态冗余，后续新增/删除选项时也不需要修改state的初始化逻辑

内容的提问来源于stack exchange，提问作者Edgars Šusts