React中如何将单选按钮选中状态存入单个状态对象

1. 移除冗余的单独状态 #

删掉单独声明的isPublished状态，我们已经在values对象里维护了checked字段来管理单选状态，无需额外单独状态。

2. 给单选按钮添加name属性 #

修改单选按钮的JSX，为每个input添加name="checked"，确保和values里的字段名对应：

<div className="radio">
  <input
    type="radio"
    value="true"
    name="checked"
    checked={values.checked === true}
    onChange={handleInput}
  />
  Yes
  <input
    type="radio"
    value="false"
    name="checked"
    checked={values.checked === false}
    onChange={handleInput}
  />
  No
</div>

3. 调整输入处理函数，兼容布尔值转换 #

修改handleInput函数，处理单选按钮的字符串值转布尔值的逻辑，同时改用函数式更新保证状态的正确性：

const handleInput = (e: { target: { name: string; value: string } }) => {
  const { name, value } = e.target;
  setValues(prevValues => ({
    ...prevValues,
    [name]: name === 'checked' ? value === 'true' : value
  }));
};

4. 清理无用代码 #

删掉原来的handleRadio函数，现在所有输入（包括单选按钮）都通过handleInput统一处理。

这样修改后，单选按钮的选中状态就会正确同步到values对象的checked字段里，和其他输入字段一起统一管理。

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