React单选框组件：onBlur传递值至表单提交异常问题

你的代码存在几个关键问题，导致表单提交无法获取值，同时onBlur的逻辑也不符合预期：

核心问题点 #

• 单选框未绑定选中状态：<input>标签没有设置checked={isChecked}，表单无法识别该单选框的选中状态，提交时自然拿不到对应值。
• onValue逻辑与依赖错误：当前代码是!isChecked时返回值，和你"选中后传递对应值"的需求相反；且useMemo依赖了无关的onChange，应该依赖isChecked、label、description。
• checkedValue依赖缺失：useCallback没有包含onValue作为依赖，会导致闭包捕获旧值。
• 单选框未设置value属性：表单提交时需要input的value来标识选中项，当前代码缺少这个属性。

修复后的代码 #

const [isChecked, setIsChecked] = React.useState<boolean>(defaultValue);

// 修正逻辑：选中时返回组合值，依赖正确的变量
const onValue = React.useMemo(() => {
    if (isChecked) {
        return `${label}, ${description}`;
    }
    return undefined; // 未选中时返回undefined或空值
}, [isChecked, label, description]);

// 修正依赖，同时调整onChange调用的参数（根据你的需求调整）
const handleBlur = React.useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
        if (isChecked) { // 仅在选中时触发传递值
            onChange?.(onValue, e.target.value);
        }
    },
    [onChange, onValue, isChecked]
);

return (
    <div className="space-y-5">
        <div className="relative flex items-start">
            <div key={id} className="flex h-5 items-center">
                <input
                    id={`${label}-id`}
                    name={label}
                    type="radio"
                    className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                    checked={isChecked} // 绑定选中状态
                    value={label} // 设置单选框的value，表单提交时会携带这个值
                    onBlur={handleBlur}
                    onChange={(e) => {
                        setIsChecked(e.target.checked); // 用e.target.checked更可靠
                        // 如果需要选中时立即触发逻辑，也可以在这里调用onChange
                        // onChange?.(onValue, e.target.value);
                    }}
                />
            </div>
            <div className="ml-3 text-sm">
                <label
                    htmlFor={`${label}-id`}
                    className="block font-medium text-gray-700"
                >
                    {label}
                </label>
                <p id={`${label}-description`} className="text-gray-500">
                    {description}
                </p>
            </div>
        </div>
    </div>
);

关键修复说明 #

1. 绑定checked和value：这是表单能识别单选框选中状态并提交对应值的基础，value可以根据你的业务需求设置为任意标识值（比如id、label等）。
2. 修正onValue逻辑：改为选中时返回组合值，依赖项调整为影响值的变量，避免不必要的重新计算。
3. 完善handleBlur：仅在选中时触发值传递，同时补全所有依赖项，避免闭包问题。
4. 优化onChange逻辑：直接使用e.target.checked来更新状态，比取反更可靠，尤其是在多个单选框组的场景下。

这样调整后，表单提交时会正确携带选中单选框的name和value，同时onBlur事件也会在选中状态下传递你需要的组合值。

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