如何在反应引导程序中使用单选按钮答案

【问题标题】：How to use radio buttons in react boostrap如何在反应引导程序中使用单选按钮
【发布时间】：2021-11-13 17:32:05
【问题描述】：

如何才能根据每个按钮的点击来选择单选按钮。因为当我点击两个单选按钮的 elguno 时，它们没有被选中。

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

const handleChange = (event) => setState({
    ...state,
    valuesQuestions: event.currentTarget.value
});


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

【问题讨论】：

标签： javascript reactjs react-hooks jsx

【解决方案1】：

基于 documentation ，handleChange 返回切换值数组。所以在useState 中你必须初始化一个默认值数组。

如果你想有初始状态：

const [state, setState] = React.useState([1])

如果你不想要首字母：

const [state, setState] = React.useState([])

所以：

const [state, setState] = React.useState([1]);

const handleChange = (val) => setState(val);

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

【讨论】：

是我不希望它有一个默认值，我想要的是它在我点击的选项中保持选中
@AndresMendez 我更新了答案。再试一次
还是不行
在沙箱中添加代码
在 codesanbox 中它可以工作，但在我的组件中它没有，我使用的是相同的代码，它会是什么？

【解决方案2】：

将event.currentTarget.value 替换为event：

const handleChange = (event) => setState({
    ...state,
    valuesQuestions: event
});

【讨论】：

还是不行