React.js radio单选按钮点击后无法选中问题咨询

错误原因 #

• 同一组单选框的name属性必须完全一致，你现在给每个单选框设置了不同的name，浏览器会判定它们属于不同分组，无法实现互斥选中效果。
• 点击事件的处理逻辑错误，clickedRadio方法只是把当前的clicked值原封不动回写到state，状态没有发生任何更新，自然不会触发选中状态切换。
• 每个单选框的value属性绑定错误，不应该统一绑定state值，而是要设置成每个选项对应的固定枚举值。
• 单选框推荐用onChange事件代替onClick，更符合表单元素的交互规范。

修正后代码 #

import { useState } from "react";

const Form = () => {
    const [clicked, setClick] = useState("v_likely");

    const clickedRadio = (e) => {
        // 拿到当前点击单选框的value更新state
        setClick(e.target.value);
    }

    return (
        <div className="form">
            <div className="radio_button" style={{ fontSize: "12px" }}>
                <label>Would you recommend to a friend?</label>
                <div className="radio">
                    <div>
                        {/* 同一组name统一为recommend，value设为固定值，用onChange事件 */}
                        <input type="radio" name="recommend" value="v_likely" checked={clicked === "v_likely"} onChange={clickedRadio}></input>
                        <label>Very Likely</label>
                    </div>
                    <div>
                        <input type="radio" name="recommend" value="likely" checked={clicked === "likely"} onChange={clickedRadio}></input>
                        <label>Likely</label>
                    </div>
                    <div>
                        <input type="radio" name="recommend" value="think" checked={clicked === "think"} onChange={clickedRadio}></input>
                        <label>Will Think</label>
                    </div>
                    <div>
                        <input type="radio" name="recommend" value="no" checked={clicked === "no"} onChange={clickedRadio}></input>
                        <label>Not At All</label>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default Form;

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