可以使用Form组件和Form.Check组件来实现。
首先,引入react-bootstrap库和相关组件:
import React, { useState } from 'react';
import { Form } from 'react-bootstrap';
然后,在组件中定义一个状态来保存选择类型的输入值:
const [selectedOption, setSelectedOption] = useState('');
接下来,使用Form组件和Form.Check组件创建一个表单,并设置type为radio或checkbox来实现选择类型的输入:
<Form>
<Form.Check
type="radio"
label="Option 1"
name="formHorizontalRadios"
id="formHorizontalRadios1"
checked={selectedOption === 'option1'}
onChange={() => setSelectedOption('option1')}
/>
<Form.Check
type="radio"
label="Option 2"
name="formHorizontalRadios"
id="formHorizontalRadios2"
checked={selectedOption === 'option2'}
onChange={() => setSelectedOption('option2')}
/>
<Form.Check
type="checkbox"
label="Option 3"
id="formHorizontalCheck1"
checked={selectedOption === 'option3'}
onChange={() =>
setSelectedOption(selectedOption === 'option3' ? '' : 'option3')
}
/>
</Form>
在上述代码中,我们使用了Form.Check组件来创建单选框和复选框,通过checked属性和onChange事件来控制选择的状态。
最后,可以通过selectedOption的值来获取用户选择的选项。
这是一个基本的示例,你可以根据实际需求进行修改和扩展。如果你想了解更多关于react-bootstrap的使用和其他组件的验证方式,可以参考腾讯云的React-Bootstrap文档:React-Bootstrap。
领取专属 10元无门槛券
手把手带您无忧上云