React中如何根据条件设置单选按钮选中状态？单选仅作视觉展示

我来帮你搞定这个场景～既然这些单选按钮只做视觉展示，不用和表单状态绑定也不用读写数据库，那直接通过条件判断给目标单选按钮设置checked属性就可以了，你注释掉name的做法很对，完全不需要和Formik的字段关联。

核心解决代码 #

直接给sales-team-yes的checked属性绑定判断条件，当customerService.onField不为空时设为true，反之则为false：

<div className="col-xs-2">
  <div className="field-label">Sales Team?</div>
  {/* Yes选项：当onField非空时选中 */}
  <Field 
    id="sales-team-yes" 
    label="Yes" 
    component={RadioField} 
    type="radio" 
    checked={!!customerService.onField}
    disabled  {/* 加上disabled，避免用户误操作，符合仅展示的需求 */}
  />
  {/* 对应的No选项：和Yes的条件相反 */}
  <Field 
    id="sales-team-no" 
    label="No" 
    component={RadioField} 
    type="radio" 
    checked={!customerService.onField}
    disabled
  />
</div>

细节解释 #

1. !!customerService.onField的作用：
   双重取反可以把任何非空值（比如字符串、对象）转换成布尔值true，如果onField是空字符串、null、undefined这类空值，会转换成false，完美匹配你的需求。

2. 关于自定义RadioField组件：
   要确保你的RadioField组件能正确接收并传递checked属性给内部的原生<input type="radio" />元素。举个简单的自定义组件例子参考：

   const RadioField = ({ label, checked, disabled, ...props }) => (
     <div>
       <input type="radio" checked={checked} disabled={disabled} {...props} />
       <label>{label}</label>
     </div>
   );
   

3. disabled属性的必要性：
   既然是仅用于展示，加上disabled可以防止用户点击修改选中状态，完全符合你的场景要求。

4. 处理异步场景：
   如果customerService是从API异步获取的，记得初始状态要处理好（比如给onField设置初始空值），避免渲染时出现undefined的报错。

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