时间戳

首页 > 解决方案 > 从 localStorage 读取值后，如何以编程方式检查单选按钮

reactjs - 从 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>

标签： reactjsradio-buttonantdradio-group

解决方案

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

推荐阅读