点击按钮时如何清除React中复选框的选中状态

当然可以实现点击Next按钮时重置复选框状态，核心是在切换问题时清空存储选中状态的数组，并修复复选框与状态的绑定逻辑。

关键修改点： #

1. 修复复选框的选中状态绑定
   原代码中checked={choice}是未定义变量，需改为判断当前选项值是否存在于userinfo.options数组中，让复选框选中状态与状态正确关联。

2. 切换问题时清空选中状态数组
   在提交当前问题答案后，更新count切换问题的同时，重置userinfo中的options和response数组为空，确保新问题的复选框恢复未选中状态。

修改后的完整代码 #

import React from "react";
import questionsData from "../questions-data";

function AddQuestions({ onAddTwo }) {
  const [userinfo, setUserInfo] = React.useState({
    options: [],
    response: [],
  });

  const handleChange = (e) => {
    const { value, checked } = e.target;
    const { options } = userinfo;

    if (checked) {
      setUserInfo({
        options: [...options, value],
        response: [...options, value],
      });
    } else {
      const updatedOptions = options.filter((item) => item !== value);
      setUserInfo({
        options: updatedOptions,
        response: updatedOptions,
      });
    }
  };

  const [count, setCount] = React.useState(0);

  const data = questionsData.data.option;
  const ask = data[count].ask;
  const one = data[count].one;
  const two = data[count].two;
  const three = data[count].three;

  const onSubmitTwo = (e) => { 
    e.preventDefault();
    const daas = userinfo.response;
    
    if (!daas.length) {
      alert("please add task");
      return;
    }
    
    onAddTwo({ daas });
    // 切换问题时清空选中状态数组
    setCount(count + 1);
    setUserInfo(prev => ({
      ...prev,
      options: [],
      response: []
    }));
  };

  const stylesNext = {
    display: count > 2 ? "none" : "block",
  };
 
  return (
    <>
       <form>
        <div className="one">
          <legend>{ask}</legend>
          <input 
            className="check--input"
            type="checkbox"
            name="option"
            value={one}
            checked={userinfo.options.includes(one)}
            onChange={handleChange} 
          />
          <label htmlFor="check--input">{one}</label>

          <input 
            className="check--input"
            type="checkbox"
            name="option"
            value={two}
            checked={userinfo.options.includes(two)}
            onChange={handleChange} 
          />
          <label htmlFor="check--input">{two}</label>
        
          <input 
            className="check--input"
            type="checkbox"
            name="option"
            value={three}
            checked={userinfo.options.includes(three)}
            onChange={handleChange} 
          />
          <label htmlFor="check--input">{three}</label>
        </div>
        <div className="control--btns">
          <button 
            className="next--btn" 
            onClick={onSubmitTwo} 
            style={stylesNext}
          >
            {count === 2 ? "Submit" : "Next"}
          </button>
        </div>
       </form>
    </>
  );
}

export default AddQuestions;

额外说明 #

• 调整stylesNext的display值为"block"，避免空格字符串可能引发的样式异常。
• 提交逻辑中添加return，防止用户未选择选项时执行后续无效代码。

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