React表单提交后如何重置单选按钮？文本框已实现重置

问题出在你的单选按钮没有和state做受控绑定——缺少checked属性，导致重置state时单选按钮的选中状态不会同步更新。

修复步骤： #

• 给每个单选按钮添加checked属性，将其与user.gender的值关联，判断当前按钮的value是否等于user.gender
• 保持提交时的setUser逻辑不变，将gender设为空字符串即可取消所有单选按钮的选中状态

修改后的单选按钮代码： #

<div className="radio">
    <span>
        <input
            type="radio"
            id="male"
            value="male"
            name="gender"
            checked={user.gender === "male"}
            onChange={(e) =>
                setUser((prev) => ({
                    ...prev,
                    gender: e.target.value,
                }))
            }
        />
        <label htmlFor="male">Male</label>
    </span>
    <span>
        <input
            type="radio"
            id="female"
            value="female"
            name="gender"
            checked={user.gender === "female"}
            onChange={(e) =>
                setUser((prev) => ({
                    ...prev,
                    gender: e.target.value,
                }))
            }
        />
        <label htmlFor="female">Female</label>
    </span>
</div>

原理说明： #

React中单选按钮属于受控组件，需要通过checked属性来控制选中状态。当你点击提交按钮，将user.gender设为空字符串时，两个单选按钮的checked条件都会不成立，从而自动取消选中状态，实现表单重置的效果。

内容的提问来源于stack exchange，提问作者Vicky Singh