如何在React Bootstrap中使用单选按钮实现点击选中功能

问题原因 #

• React Bootstrap 的 ToggleButtonGroup 受控模式下，onChange 回调的第一个参数直接是选中项的 value 值，不是原生事件对象，你代码中通过 event.currentTarget.value 拿不到正确的选中值，状态更新失败自然不会触发选中效果。
• 受控组件不需要额外设置 default 属性：你已经给组件绑定了 value={state.valuesQuestions} 受控属性，初始值已经在 useState 中定义为 1，同时使用受控属性和默认值属性会引发状态冲突，也可能导致选中失效。

修改后的可运行代码 #

const [state, setState] = React.useState({
    valuesQuestions: 1,
})

// 回调参数直接取选中值即可
const handleChange = (selectedValue) => setState({
    ...state,
    valuesQuestions: selectedValue
});


<Form>
   <Form.Group className="mb-3">
    <Form.Label>¿Dolor de garganta?</Form.Label>
      <div className="btn-check selects--radio">
         </div>
      <ToggleButtonGroup 
        type="radio" 
        name="options" 
        value={state.valuesQuestions} 
        onChange={handleChange}
      >
          <ToggleButton value={1} variant="outline-warning" >Si</ToggleButton>
          <ToggleButton value={2} variant="outline-warning"  >No</ToggleButton>
      </ToggleButtonGroup>
   </Form.Group>
</Form>

验证说明 #

修改后点击对应按钮会直接把选中的 1/2 传入 handleChange 更新状态，ToggleButtonGroup 会匹配绑定的 value 值自动标记对应按钮为选中状态。

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