React中Radio Button单选互斥失效，两个选项同时被选中如何解决

• 同组单选框name属性不统一：HTML原生单选框的互斥逻辑依赖相同的name属性值，同name的单选会被识别为同一组，同一时间仅能选中一个。你现有代码中两个单选的name分别为frequency和delta，被浏览器判定为两组独立单选，不会触发互斥。
• checked绑定逻辑错误：你直接将checked绑定为value变量，只要value不为空，两个单选的checked都会被判定为真，导致同时选中。正确逻辑是判断全局value是否等于当前单选框自身的value值。

const [value, setValue] = React.useState('');

const handleChange = (event) => {
  setValue(event.target.value);
};

<Row className="ISrch_Box_choices">
  <Col className="IS_Radio_MediaQuery" lg={2}>
    <label className="radio-mg" style={styleRR}>
      <input
        id="frequency"
        type="radio"
        name="calcType" // 改为统一的组名
        checked={value === 'frequency'} // 修正判断逻辑
        value="frequency" 
        onChange={handleChange}
        style={{
          cursor: "pointer",
        }}
      />
      <span style={styleRRB}></span>
    </label>
  </Col>
  <Col>
    <label for="frequency">Frequency</label>
  </Col>
</Row>
<Row className="ISrch_Box_choices">
  <Col className="IS_Radio_MediaQuery" lg={2}>
    <label className="radio-mg" style={styleRR}>
      <input
        id="delta"
        type="radio"
        name="calcType" // 和上方单选保持相同组名
        checked={value === 'delta'} // 修正判断逻辑
        value="delta"
        onChange={handleChange}
        style={{
          cursor: "pointer",
        }}
      />
      <span style={styleRRB}></span>
    </label>
  </Col>
  <Col>
    <label for="delta">Delta</label>
  </Col>
</Row>

修改后两个单选属于同一组，选中其中一个时，全局value会更新为对应值，另一个单选的checked判断会自动返回false，实现互斥选中的效果。

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