Reactjs：我正在根据状态检查单选按钮，但在选中一个单选按钮时无法单击其他单选按钮

Posted 2023-02-22

【中文标题】Reactjs：我正在根据状态检查单选按钮，但在选中一个单选按钮时无法单击其他单选按钮

【英文标题】：Reactjs: I am checking radio button based on state but can't click other radio button when one is checked

【发布时间】：2021-08-27 20:10:40

【问题描述】：

我的单选按钮取决于状态值。如果用户是男性，则状态的值为 M，并且还选中了单选按钮 Male。现在说，我需要将其更改为Female。但是，如果我点击Female 单选按钮，它并没有从男性改变。

这是我的代码：

// App.js
const [ gender, setGender ] = useState('');

return (
    <GenderComponent
        value=gender
        name="gender"
        onSubmit=handleSubmit
    />
)

// genderComp.js
return (
    <div>
        <label>
            <input
                type="radio"
                checked=value==="M"
                onChange=onChange
                name=name
            />Male</label>
        <label>
            <input
                type="radio"
                checked=value==="F"
                onChange=onChange
                name=name
            />
            Female</label>
    </div>
    <button type="submit" onClick=handleSubmit>
        Save
    </button>
)

我希望单选按钮检查匹配value 的字段，并且这两个应该是可编辑的。我该怎么做？

【问题讨论】：

你需要定义你的onChange函数。这里有很多关于如何编写单选按钮的代码示例：***.com/questions/27784212/…

【参考方案1】：

正如约瑟夫所说，您需要定义 onChange 函数，但您还需要将 value 属性添加到您的两个输入中。 通过这种方式，您可以使用新定义的函数对这些值进行操作并将它们存储在状态对象中。更新状态会导致组件更新，因此您也会在单选按钮上看到更改。

我将把输入单选按钮的文档留在这里：https://developer.mozilla.org/en-US/docs/Web/html/Element/input/radio

【参考方案2】：

所以我发现 onChange 是工作文件。我的问题通过将 checked 替换为 defaultChecked 并添加 value 属性来解决：

<div>
    <label>
        <input
            type="radio"
            onChange=onChange
            name=name
            defaultChecked=value==="M"
            value="M"
        />
        Male
    </label>
    <label>
        <input
            type="radio"
            onChange=onChange
            name=name
            defaultChecked=value==="F"
            value="F"
        />
        Female
    </label>
</span>