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

Posted 2023-02-21

【中文标题】如何在反应引导程序中使用单选按钮

【英文标题】：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>

【参考方案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
);

【讨论】：

还是不行