创建一个单选框组件,可以使用 flex 自带的 RadioButtonGroup 组件或者自定义单选框组件。怎样自定义一个单选框组件
时间: 2023-08-18 12:13:05 浏览: 88
自定义单选框组件的基本思路如下:
1. 创建一个容器组件,容器内包含一个文本标签和一个圆形选择器。
2. 通过 props 将选项文本传递给容器组件,并在容器组件内渲染出来。
3. 在容器组件内使用 state 来保存单选框的选中状态,并在选中状态改变时触发回调函数通知父组件。
4. 在圆形选择器被点击时,更新单选框的选中状态,并调用回调函数通知父组件。
以下是一个简单的单选框组件实现示例:
```
import React, { Component } from 'react';
class RadioButton extends Component {
state = {
checked: false,
};
handleClick = () => {
const { checked } = this.state;
const { onCheck, value } = this.props;
if (!checked) {
this.setState({ checked: true });
onCheck(value);
}
};
render() {
const { checked } = this.state;
const { label } = this.props;
return (
<div onClick={this.handleClick}>
<div
style={{
width: '24px',
height: '24px',
borderRadius: '50%',
border: 'solid 1px #ccc',
backgroundColor: checked ? '#007bff' : '#fff',
display: 'inline-block',
marginRight: '8px',
}}
/>
<span>{label}</span>
</div>
);
}
}
class RadioButtonGroup extends Component {
state = {
value: '',
};
handleCheck = value => {
this.setState({ value });
this.props.onChange(value);
};
render() {
const { options } = this.props;
const { value } = this.state;
return (
<div>
{options.map(option => (
<RadioButton
key={option.value}
label={option.label}
value={option.value}
onCheck={this.handleCheck}
checked={option.value === value}
/>
))}
</div>
);
}
}
export default RadioButtonGroup;
```
使用示例:
```
<RadioButtonGroup
options={[
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
]}
onChange={value => console.log(value)}
/>
```
阅读全文