react 里面 fusion 的 单选怎么实现
时间: 2024-05-11 12:20:16 浏览: 10
可以使用 Fusion 的 `Radio` 组件来实现单选功能。
首先,在 React 组件中引入 `Radio` 组件:
```javascript
import { Radio } from '@alifd/next';
```
然后在 render 方法中使用 `Radio` 组件,并设置相应的属性:
```javascript
render() {
return (
<div>
<Radio.Group
dataSource={dataSource}
value={this.state.selectedValue}
onChange={this.handleChange}
/>
</div>
);
}
```
其中,`dataSource` 是一个数组,每个元素包含 `label` 和 `value` 两个属性,用于渲染单选项;`value` 属性表示当前选中的值,`onChange` 方法用于处理选中项改变时的回调。
完整的代码示例:
```javascript
import React, { Component } from 'react';
import { Radio } from '@alifd/next';
const dataSource = [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' },
];
class RadioDemo extends Component {
state = {
selectedValue: '1',
};
handleChange = (value) => {
this.setState({
selectedValue: value,
});
};
render() {
return (
<div>
<Radio.Group
dataSource={dataSource}
value={this.state.selectedValue}
onChange={this.handleChange}
/>
</div>
);
}
}
export default RadioDemo;
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)