Reactjs： 我根据状态来检查单选按钮，但当一个单选按钮被选中时，无法点击其他单选按钮。

21 浏览
0 Comments

Reactjs： 我根据状态来检查单选按钮，但当一个单选按钮被选中时，无法点击其他单选按钮。

我的单选按钮取决于状态的值。如果用户是男性，那么状态的值是M，并且单选按钮Male也被选中。现在假设我想将其更改为Female。但是，如果我点击Female单选按钮，它不会从男性更改为女性。

这是我的代码：

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

我希望单选按钮根据value匹配字段并且这两个字段都可编辑。我该如何做到这一点？

0

2 答案

0 Comments

问题的出现的原因是没有定义onChange函数，并且没有给两个input元素添加value属性。

解决方法是先定义一个onChange函数，然后给两个input元素添加value属性。通过定义的函数操作这些值，并将它们存储在状态对象中。更新状态会导致组件更新，因此您也会在单选按钮上看到更改。

以下是input单选按钮的文档链接：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

0
0 Comments

问题的原因是使用了错误的属性checked，解决方法是将checked替换为defaultChecked并添加value属性。

问题是因为checked属性在这里被错误地使用了。在这段代码中，当defaultChecked的值为true时，输入框会被默认选中。而checked属性则用于表示输入框当前是否被选中，它需要通过改变输入框的状态来改变。

解决方法是将checked属性替换为defaultChecked属性，并为每个输入框添加value属性。当value属性的值与defaultChecked属性的比较结果为true时，对应的输入框会被默认选中。

下面是修改后的代码：

<div>
    <label>
        <input
            type="radio"
            onChange={onChange}
            name={name}
            defaultChecked={value==="M"}
            value="M"
        />
        男性
    </label>
    <label>
        <input
            type="radio"
            onChange={onChange}
            name={name}
            defaultChecked={value==="F"}
            value="F"
        />
        女性
    </label>
</div>

0