如何让单选按钮既显示数据库布尔值，又能在无数据时允许用户选择？

1. 修正单选按钮组的name属性 #

单选按钮需要相同的name属性才能构成互斥组，当前两个按钮name不同会导致可同时选中，这是错误的。统一设置name为同一个值，比如name="testOption"。

2. 修复onChange逻辑，正确更新test.c #

当前的setTest(e.target.checked)会直接将整个test对象替换为布尔值，导致后续状态混乱。需要通过函数式更新，保留test的其他属性，仅修改c字段：

• 点击Yes按钮时，将test.c设为true
• 点击No按钮时，将test.c设为false

3. 优化checked属性的判断逻辑 #

保持原有逻辑，当test.c不存在（undefined/null）时，两个按钮的checked都为false，此时按钮处于未选中状态，允许用户点击选择。

修改后的完整代码 #

<div className="form-group row mb-3">
  <div className="col-sm-2" style={{ fontSize: "1rem" }}>
    Test:{" "}
  </div>
  <div className="col-sm-4">
    <div className="form-check form-check-inline">
      <input
        className="form-check-input"
        type="radio"
        name="testOption"
        id="testy"
        value="y"
        disabled={test?.a === "V" || test?.b != null}
        checked={test?.c === true}
        onChange={() => setTest(prev => ({ ...prev, c: true }))}
      />
      <label className="form-check-label" htmlFor="testy">
        Yes
      </label>
    </div>
    <div className="form-check form-check-inline">
      <input
        className="form-check-input"
        type="radio"
        name="testOption"
        id="testn"
        value="n"
        disabled={test?.a === "V" || test?.b != null}
        checked={test?.c === false}
        onChange={() => setTest(prev => ({ ...prev, c: false }))}
      />
      <label className="form-check-label" htmlFor="testn">
        No
      </label>
    </div>
  </div>
</div>

逻辑说明 #

• 当数据库返回test.c时：test?.c === true会让Yes按钮选中，test?.c === false会让No按钮选中，符合展示已有数据的需求。
• 当数据库未返回test.c时：两个按钮均处于未选中状态，只要disabled条件不满足（test.a不是"V"且test.b不存在），用户可自由选择，点击后对应布尔值会存入test.c，后续页面加载时能读取该值并正确展示。

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