此页面上的某些答案不起作用。也许从那以后情况发生了变化。
我在 React Bootstrap 网站的帮助下整理了这个。
<Col>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Radio name="group1"/>
<InputGroup.Text >London</InputGroup.Text>
</InputGroup.Prepend>
<FormControl/>
</InputGroup>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Radio name="group1"/>
<InputGroup.Text >New York</InputGroup.Text>
</InputGroup.Prepend>
<FormControl/>
</InputGroup>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Radio name="group1"/>
<InputGroup.Text >Colombo</InputGroup.Text>
</InputGroup.Prepend>
<FormControl/>
</InputGroup>
要使单选按钮集作为一个组起作用,您必须为它们命名(以便在任何给定时间只选择一个单选按钮)。
添加表单控件可以使输入的边缘很好地圆润,但也可以使单选按钮标签可编辑。如果这是一个问题,您可以省略表单控件。
如果你想要不同的外观和感觉,你可以试试这个。
<Form.Check
type="radio"
label="London"
name="group2"
id="radio1"
/>
<Form.Check
type="radio"
label="New York"
name="group2"
id="radio2"
/>
<Form.Check
type="radio"
label="Colombo"
name="group2"
id="radio3"
/>
然而,随着这些获得价值和处理 onChange 是困难的。最终我使用了另一个控件。
这是一个名为 react-radio-group 的 npm 包。您必须通过在命令上运行此行来安装它。
npm install react-radio-group
然后将其导入您的文件中。
import { Radio, RadioGroup} from 'react-radio-group'
这是按钮组的代码。
<RadioGroup name="fruits" onChange={(e) => handleOnChange(e)}>
<div className="radio-button-background">
<Radio value="Apple" className="radio-button" />Apple
</div>
<div className="radio-button-background">
<Radio value="Orange" className="radio-button" />Orange
</div>
<div className="radio-button-background">
<Radio value="Banana" className="radio-button" />Banana
</div>
</RadioGroup>
classNames 是我给出样式的地方。