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

Question

我正在实施性别无线电输入。我在提交时将其值设置为 localStorage，这样当我 return 返回时，我可以看到我检查过的那个。我设法从 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>

Answer 1

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

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 会有些复杂。

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

How can i programmatically check a radio button after i read the value from localStorage

radio-group

radio-button

reactjs

antd