React中如何取消勾选复选框？解决无法取消勾选的问题

问题根源 #

你的复选框属于受控组件，checked状态完全由list?.flag的值决定，但onChange事件处理函数里没有更新list.flag的取值——点击复选框后数据源没变化，所以复选框的状态不会跟着切换。另外，代码里读取e.target.value对状态更新没有任何作用，复选框的受控状态不需要依赖value属性。

修复方案 #

需要在onChange中更新list.flag的值（如果list是React状态变量，必须通过状态更新函数触发组件重渲染）。

假设list是通过useState管理的状态，修复后的代码如下：

import { useState } from 'react';

function App() {
  // 初始化状态
  const [list, setList] = useState({ flag: "Y" });

  return (
    <div className="App">
      <input
        type="checkbox"
        checked={list?.flag === "Y"}
        onChange={(e) => {
          // 根据当前勾选状态切换flag值
          const newFlag = list.flag === "Y" ? "N" : "Y";
          // 不可变更新状态，触发组件重渲染
          setList(prev => ({ ...prev, flag: newFlag }));
        }}
      />
    </div>
  );
}

export default App;

关键说明 #

• 点击复选框时，通过setList更新flag的取值，让checked属性能根据新的状态值重新计算，从而正确切换勾选状态。
• React状态更新遵循不可变原则，所以要用展开运算符...prev创建新对象，确保组件能感知到状态变化并重新渲染。

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