React单选按钮需双击选中如何修复及设置默认选中项

代码里的几处写法错误导致了需要双击才能选中单选框的问题，修复后可实现单击选中效果，同时可直接通过状态初始值配置默认选中项：

核心错误点 #

• handleChange回调中错误调用了e.preventDefault()：这行代码会拦截radio单选框的原生选中行为，第一次点击时DOM不会自动切换选中状态，必须等状态更新触发二次渲染才能显示选中效果，直接表现就是需要双击才能选中。
• label标签的htmlFor属性写法错误：你写的htmlFor="{hero}"是把字面量字符串{hero}绑定给了属性，没有读取循环中的hero变量，导致点击文字标签无法触发对应单选框的选中。
• 单选框没有做受控状态绑定：input没有关联selected状态，会出现React状态和DOM实际选中状态不同步的问题。

修复方法 #

• 删除handleChange中的e.preventDefault()代码，不要阻止单选框的原生交互行为
• 修正htmlFor的绑定写法，用JSX插值读取真实的hero值
• 给每个radio input添加checked属性，绑定判断逻辑checked={selected === hero}，让组件状态和DOM选中状态保持一致
• 配置默认选中项：直接给selected对应的useState传入初始值即可，比如想默认选中Superman，就把初始值从null改成"Superman"

修复后的完整代码 #

import React, { useState } from "react";
import "./App.css";
function App() {
    const [heros, setHeros] = useState([
        "Superman",
        "Batman",
        "Antman",
        "Robocop",
    ]);
    // 修改这里的初始值即可设置默认选中项，比如设为"Batman"就默认选中蝙蝠侠
    const [selected, setSelected] = useState("Superman");

    const handleChange = (e) => {
        setSelected(e.target.value);
        console.log(e.target.checked);
    };


    return (
        <div>
            <h1>Select Your Favorite Hero</h1>
            <form onChange={handleChange}>
                {heros.map((hero, index) => (
                    <div key={index}>
                        <input
                            type="radio"
                            name="hero"
                            id={hero}
                            value={hero}
                            checked={selected === hero}
                        />
                        <label htmlFor={hero}>{hero}</label>
                        <br />
                    </div>
                ))}
            </form>
            <div>
                <p>Your super hero is: {selected}</p>
            </div>
        </div>
    );
}
export default App;

修复后单击单选框或者对应的文字标签都可以正常选中，修改useState里的初始值就能自由调整默认选中的英雄。

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