React单选Checkbox功能异常：初始正常点击后失效问题排查

嘿，我帮你梳理了这段代码的问题，其实是两个容易忽略的细节导致功能异常：

核心问题分析 #

1. 数据类型不匹配导致状态判断失效 #

你的初始optionSelected是数字类型的2，但DOM元素的id属性永远是字符串类型。在toggleCheckbox方法中，你直接用e.target.id（字符串）和this.state.optionSelected（数字）做比较，第一次点击后会把optionSelected设置为字符串类型。之后在ItemList组件里，判断optionSelected === (index + 1)时，字符串和数字的严格相等比较会返回false，导致所有选项的checked状态都变为false，自然无法正常切换选中状态。

2. 受控组件checked属性错误使用字符串 #

React的受控组件要求checked属性接收布尔值（true/false），但你在Item组件里给input的checked传了(checked ? "checked" : "")这种字符串值。虽然浏览器可能会兼容，但这会造成React状态和DOM实际状态的不同步，进一步加剧功能失效的问题。

修复后的完整代码 #

class ItemView extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      options: [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }],
      optionSelected: 2
    }
  }
  toggleCheckbox(e) {
    // 将字符串id转为数字，保持类型一致
    const selectedId = Number(e.target.id);
    if (this.state.optionSelected === selectedId) {
      this.setState({ optionSelected: undefined })
    } else {
      this.setState({ optionSelected: selectedId })
    }
  }
  render() {
    return (
      <div className="container">
        <div className="row">
          <ItemList 
            options={this.state.options} 
            optionSelected={this.state.optionSelected} 
            toggleCheckbox={(e) => this.toggleCheckbox(e)} 
          />
        </div>
      </div>
    )
  }
}
const ItemList = ({ options, optionSelected, toggleCheckbox }) => {
  return (
    <div className="col s12">
      { options.map((option, index) => (
        <Item 
          key={index} 
          option={option} 
          checked={optionSelected === option.id} // 直接用option.id和状态比较，更直观
          toggleCheckbox={toggleCheckbox} 
        />
      )) }
    </div>
  )
}
const Item = ({ option, checked, toggleCheckbox }) => {
  return (
    <div className="card">
      <div className="card-content">
        <p><label htmlFor={option.id}>
          <input 
            className="filled-in" 
            type="checkbox" 
            id={option.id} 
            onChange={toggleCheckbox} 
            checked={checked} // 直接传递布尔值
          />
          <span>{option.id}. {option.name}</span>
        </label></p>
      </div>
    </div>
  )
}

额外优化点 #

我还调整了ItemList里的checked判断逻辑，直接用optionSelected === option.id代替optionSelected === (index + 1)，这样即使options的顺序变化，也不会影响选中判断，逻辑更健壮。

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