React中如何让默认选中复选框值自动存入reasons状态并提交

你的问题核心是初始状态未包含必填项、复选框checked属性语法错误，以及当前逻辑允许移除必填原因。按以下修改即可解决：

1. 初始化状态时默认填入必填项 #

组件挂载时就把「I want to attend events」放进reasons状态，确保默认选中的同时状态也同步：

const [reasons, setReasons] = useState(["I want to attend events"])

2. 修复复选框的checked属性 #

你当前的checked属性用了错误的逗号表达式，直接判断状态中是否包含该值即可：

<input
    id="attend"
    type="checkbox"
    value="I want to attend events"
    onChange={onReasonChange}
    checked={reasons.includes("I want to attend events")}
/>

3. 修改变更处理函数，禁止移除必填项 #

用户点击这个复选框时，不允许将其从reasons中移除，在处理函数中加判断拦截：

const onReasonChange = event => {
  const targetValue = event.target.value;
  // 若是必填项且已选中，直接返回不执行移除操作
  if (targetValue === "I want to attend events" && reasons.includes(targetValue)) {
    return;
  }
  // 处理其他选项的移除逻辑
  if (reasons.includes(targetValue)) {
    setReasons(reasons.filter(reason => reason !== targetValue));
    return;
  }
  // 添加新选项
  setReasons([...reasons, targetValue]);
}

可选：提交时的兜底验证 #

为了彻底避免意外情况，可在表单提交时再加一层检查，确保必填项始终存在：

const handleSubmit = (e) => {
  e.preventDefault();
  // 兜底确保必填项存在
  const finalReasons = reasons.includes("I want to attend events") 
    ? reasons 
    : [...reasons, "I want to attend events"];
  // 执行提交逻辑，使用finalReasons而非原reasons
  console.log("提交的报名原因：", finalReasons);
}

修改完成后，无论用户如何操作，该必填原因都会始终保留在reasons状态中，满足提交时至少有一个原因的要求。

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