React中重置状态时如何取消所有<input type='checkbox'/>的选中状态

问题核心是复选框未与状态双向绑定：你仅在onChange事件中更新了状态数组，但复选框自身的选中状态没有和React状态关联，导致调用setChecked([])清空状态时，DOM中的复选框仍保持之前的选中状态，未同步更新。

解决方法很直接——给每个复选框添加checked属性，绑定到状态判断结果，让React完全控制复选框的选中状态：

<input 
  type="checkbox" 
  value={fruit} 
  onChange={handleChangeFruit} 
  checked={isCheckedFruit(fruit)} // 新增该行，绑定状态
/>

修改后的完整代码 #

JavaScript #

const App = () => {
const fruits = ["Tomate", "Banana", "Orange"];

  const [checked, setChecked] = React.useState([]);

  const handleChangeFruit = (event) => {
    var updatedFruitList = [...checked];
    if (event.target.checked) {
      updatedFruitList = [...checked, event.target.value];
    } else {
      updatedFruitList.splice(checked.indexOf(event.target.value), 1);
    }
    setChecked(updatedFruitList);
  };

  const isCheckedFruit = (fruit) => {
    return checked.includes(fruit); // 简化判断逻辑
  };

  const handleDeleteWorld = () => {
    setChecked([]);
  };

  return (
    <div className="App">
      <div>
        {fruits.map((fruit) => (
          <div key={fruit}>
            <input 
              type="checkbox" 
              value={fruit} 
              onChange={handleChangeFruit} 
              checked={isCheckedFruit(fruit)}
            />
            <label>{fruit}</label>
          </div>
        ))}
      </div>

      <div>
        <p>List :</p>
        {fruits.map((fruit) => (
          <div  key={fruit}>
            {(isCheckedFruit(fruit) || !checked.length) && (
              <p>{fruit}</p>
            )}
          </div>
        ))}
      </div>

      <div>
        <button onClick={handleDeleteWorld}>Reset checked elements</button>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

HTML #

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

额外优化说明 #

将isCheckedFruit函数改为使用includes方法，比find更简洁高效，逻辑完全一致。

修改后点击重置按钮时，checked状态变为空数组，所有复选框的checked属性会同步变为false，彻底解决状态不同步的问题。

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