如何在React reducer中利用传入的事件对象验证单选按钮？

首先，你的当前reducer只是打印事件对象，没有实际处理验证和状态更新。我们可以利用事件对象里的target属性（包含name、checked、value等关键信息）来完成验证和状态更新，具体步骤如下：

1. 从事件对象中提取关键属性 #

单选按钮的change事件对象里，target会包含：

• name：用来区分不同的单选组（比如性别组、年龄组）
• checked：标记当前单选按钮是否被选中
• value：单选按钮的取值（比如male、18等）

我们可以先解构这些属性，方便后续操作。

2. 添加验证逻辑 #

根据单选组的不同，编写对应的验证规则：

• 比如性别组，限制取值只能是male或female
• 比如年龄组，验证取值是合法的数字且在合理范围内（比如18-99岁）

3. 更新状态（仅在验证通过时） #

Reducer是纯函数，必须返回新的状态对象，不能直接修改原state。我们可以用扩展运算符...state复制原状态，再更新对应字段。

修改后的Reducer代码 #

const initialState = { genderRadio: false, ageRadio: false };
const reducer = (state = initialState, action) => {
    switch(action.type) {
        case "VALI_RADIO_INP":
            // 解构事件目标的关键属性
            const { name, checked, value } = action.payload.target;
            
            // 初始化验证状态
            let isValid = true;

            // 根据不同单选组做针对性验证
            if (name === "gender") {
                // 验证性别取值是否在允许范围内
                isValid = ['male', 'female'].includes(value);
            } else if (name === "age") {
                // 验证年龄是否是合法数字且在18-99之间
                const ageNumber = parseInt(value);
                isValid = !isNaN(ageNumber) && ageNumber >= 18 && ageNumber <= 99;
            }

            // 验证通过则更新状态，否则返回原状态
            if (isValid) {
                return {
                    ...state,
                    // 根据name匹配对应的state字段（比如name=gender对应genderRadio）
                    [`${name}Radio`]: checked 
                    // 如果需要存储选中的value而非布尔值，可以改成: [`${name}Radio`]: value
                };
            }

            // 验证不通过时返回原状态，也可以在这里添加错误提示状态
            return state;
        default:
            return state;
    }
};
export default reducer;

组件端配合说明 #

确保你的单选按钮设置了正确的name和value属性，这样事件对象才能正确传递信息：

{/* 性别单选组 */}
<label>
  <input 
    type="radio" 
    name="gender" 
    value="male" 
    onChange={validateRadioInput} 
  />
  男
</label>
<label>
  <input 
    type="radio" 
    name="gender" 
    value="female" 
    onChange={validateRadioInput} 
  />
  女
</label>

{/* 年龄单选组 */}
<label>
  <input 
    type="radio" 
    name="age" 
    value="18" 
    onChange={validateRadioInput} 
  />
  18岁
</label>
<label>
  <input 
    type="radio" 
    name="age" 
    value="25" 
    onChange={validateRadioInput} 
  />
  25岁
</label>

额外提示 #

如果需要在验证不通过时给用户反馈，可以在initialState里添加错误字段（比如radioError: ""），验证失败时更新该字段为提示文本，再在组件中渲染出来。

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