React中如何实现Radio Button的条件式切换功能？

原代码核心问题 #

1. 单选按钮用了defaultValue，属于非受控组件写法，没法通过state精准控制选中状态
2. handleRadioChange未接收事件参数e，还错误使用了未定义的setRadioValue
3. 校验逻辑没和单选按钮的选中状态更新关联起来

解决方案 #

把单选按钮改成受控组件，用state里的radioValue绑定选中状态，只有校验条件成立时才更新这个状态；条件不成立时不修改state，就能自然保持原选中状态。

修改后的完整代码 #

import React from "react";

class SomePage extends React.Component {
  constructor() {
    super();
    this.state = {
      someVar: false,
      radioValue: "orange" // 控制单选选中状态的核心state
    };
  }

  fruitBasket = [
    { id: "orange" },
    { id: "apple" },
    { id: "banana" }
  ];

  // 模拟带Promise的校验函数，替换成你的实际校验逻辑
  someFunction = () => {
    return new Promise((resolve) => {
      // 示例：这里写真实校验逻辑，比如权限判断、表单校验等
      setTimeout(() => {
        // 示例规则：选中apple时校验通过，其他情况不通过
        resolve(targetValue === "apple" ? true : undefined);
      }, 500);
    });
  };

  handleRadioChange = (e) => {
    const targetValue = e.target.value; // 获取用户点击的目标选项值

    this.someFunction().then((someBool) => {
      if (someBool !== undefined) {
        // 校验通过，更新选中状态和someVar
        this.setState({
          someVar: true,
          radioValue: targetValue
        });
      }
      // 校验不通过时啥也不做，state保持原样，单选按钮自动维持原选中状态
    });
  };

  render() {
    return (
      <div className="App">
        {this.fruitBasket.map((fruit) => {
          return (
            <div key={fruit.id} onChange={this.handleRadioChange}>
              <label>
                <input
                  type="radio"
                  value={fruit.id}
                  checked={this.state.radioValue === fruit.id} // 受控绑定state
                  name="fruit"
                />
                {fruit.id}
              </label>
            </div>
          );
        })}
      </div>
    );
  }
}

export default SomePage;

关键逻辑说明 #

1. 受控绑定：通过checked={this.state.radioValue === fruit.id}把单选按钮的选中状态和state绑定，完全由state控制选中行为
2. 校验流程：用户点击选项时先拿到目标值，执行异步校验函数，只有校验返回someBool !== undefined时才更新radioValue
3. 保持原状态：校验不通过时不修改state，组件重新渲染时会根据原radioValue渲染选中状态，自动维持原选项选中

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