ReactJS中如何实现仅选中一个复选框的功能？

嗨，我来帮你搞定这个问题！你现在想用复选框实现「选一个就自动取消另一个」的单选效果，但原来的方法没起作用对吧？核心问题在于复选框的name属性相同并不会触发互斥行为——这个特性是专门给<input type="radio">设计的。咱们换个思路，用受控组件的方式手动控制选中状态就能解决。

具体修改步骤 #

1. 调整状态定义

把原来的head布尔值状态，换成一个更清晰的变量（比如sortBy），用来记录当前选中的排序类型，值可以是'action'或're-action'：

constructor(props) {
  super(props);
  this.state = {
    sortBy: 'action' // 默认选中「Sort by action」
  };
  this.sorter = this.sorter.bind(this); // 记得绑定this到方法
}

2. 将复选框改为受控组件

把defaultChecked替换成checked，通过sortBy的值来判断当前复选框是否选中：

createElement('div', {className: 'checkbox'}, 
  createElement('label', null, 
    createElement('input', { 
      type: 'checkbox', 
      name: 'tssort', 
      checked: this.state.sortBy === 'action', // 受控判断条件
      onChange: () => this.sorter('action') 
    }), 
    'Sort by action'
  ), 
  createElement('label', null, 
    createElement('input', { 
      type: 'checkbox', 
      name: 'tssort', 
      checked: this.state.sortBy === 're-action', // 受控判断条件
      onChange: () => this.sorter('re-action') 
    }), 
    'Sort by Re-action'
  )
)

3. 更新sorter方法

现在这个方法只需要接收选中的排序类型，更新状态后，另一个复选框会因为checked条件不满足自动取消选中：

sorter(selectedSort) {
  this.setState({
    sortBy: selectedSort
  });
}

为什么原来的方法失效？ #

• 复选框的name属性相同不会触发互斥，只有单选按钮（type="radio"）才自带这个默认行为；
• 你之前用defaultChecked是非受控组件的写法，后续状态更新不会同步到复选框的选中状态，必须用checked配合状态做受控组件，才能实时响应状态变化。

如果你的组件是函数式组件（用Hooks），逻辑也是类似的，把state换成useState即可，这里就不展开啦。

内容的提问来源于stack exchange，提问作者BKK