从 localStorage 读取值后，如何以编程方式检查单选按钮

问题描述

我正在实施性别无线电输入。我在提交时将它的值设置为 localStorage，这样当我返回时我可以看到我检查过的那个。我设法从 localStorage 中读取了它的值，但我无法根据获得的输入值检查单选按钮。

这是单选按钮的代码

        <div> 
        <Radio.Group name="radiogroup" onChange={(e) => handleRadioButtons(e)} >
            <Radio 
            checked={genderChecked.male}  
            value={1} 
            >Male</Radio>
            <Radio 
            checked={genderChecked.female} 
            value={2}
            >Female</Radio>
        </Radio.Group>
        </div>

解决方法

您需要在 value 上指定 Radio.Group。我建议将您的状态更改为字符串值，如下所示以处理更容易的值更改：

const MyComponent = () => {
  const [ genderChecked,setgenderChecked ] = useState('male');
  const handleRadioButtons = e => setgenderChecked(e.target.value);

  return (
    <>
    <Radio.Group onChange={handleRadioButtons} value={genderChecked}>
      <Radio value='male'>Male</Radio>
      <Radio value='female'>Female</Radio>
    </Radio.Group>
    </>
  );
};

否则您的 onChange 处理和 value 会有些复杂。