Radio 单选框
单选框表单控件。
何时使用
- 用于在多个备选项中选中单个状态。
- 和 Select 的区别是,Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。
代码演示
基本使用
请确保Radio具有相同的name属性以实现单选功能。
import React from 'react';
import ReactDOM from 'react-dom';
import { Radio } from 'choerodon-ui/pro';
function handleChange(value) {
console.log('[basic]', value);
}
ReactDOM.render(
<div>
<Radio name="base" value="A" onChange={handleChange} defaultChecked>A</Radio>
<Radio name="base" value="B" onChange={handleChange}>B</Radio>
<Radio name="base" value="C" onChange={handleChange}>C</Radio>
</div>,
document.getElementById('container')
);
受控单选框
受控单选框
import React from 'react';
import ReactDOM from 'react-dom';
import { Radio } from 'choerodon-ui/pro';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'A',
};
}
handleChange = (value) => {
console.log('[controlled]', value, '[oldValue]', this.state.value);
this.setState({
value,
});
}
render() {
const { value } = this.state;
return (
<div>
<Radio name="controlled" value="A" checked={value === 'A'} onChange={this.handleChange}>A</Radio>
<Radio name="controlled" value="B" checked={value === 'B'} onChange={this.handleChange}>B</Radio>
<Radio name="controlled" value="C" checked={value === 'C'} onChange={this.handleChange}>C</Radio>
</div>
);
绑定数据源
绑定数据源
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Radio } from 'choerodon-ui/pro';
function handleDataSetChange({ value, oldValue }) {
console.log('[dataset newValue]', value, '[oldValue]', oldValue);
}
const data = [{ bind: 'A' }];
class App extends React.Component {
ds = new DataSet({
data,
fields: [
{ name: 'bind' },
],
events: {
update: handleDataSetChange,
},
});
render() {
return (
<div>
<Radio dataSet={this.ds} name="bind" value="A">A</Radio>
<Radio dataSet={this.ds} name="bind" value="B">B</Radio>
<Radio dataSet={this.ds} name="bind" value="C">C</Radio>
</div>
只读
只读。
import React from 'react';
import ReactDOM from 'react-dom';
import { Radio, DataSet } from 'choerodon-ui/pro';
const data = [{ rd: 'C' }];
class App extends React.Component {
ds = new DataSet({
data,
fields: [
{ name: 'rd', readOnly: true },
],
});
render() {
return (
<div>
<Radio name="rd" disabled>A</Radio>
<Radio name="rd" readOnly>B</Radio>
<Radio dataSet={this.ds} name="rd" value="C">C</Radio>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
按钮显示效果
显示成按钮。
import React from 'react';
import ReactDOM from 'react-dom';
import { Radio } from 'choerodon-ui/pro';
function handleChange(value, oldValue) {
console.log('[button]', value, '[oldValue]', oldValue);
}
ReactDOM.render(
<div>
<Radio mode="button" name="base" value="A" onChange={handleChange} defaultChecked>A</Radio>
<Radio mode="button" name="base" value="B" onChange={handleChange}>B</Radio>
<Radio mode="button" name="base" value="C" onChange={handleChange}>C</Radio>
</div>,
document.getElementById('container')
);
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
checked | <受控>是否选中 | boolean | |
defaultChecked | 初始是否选中 | boolean | false |
mode | 显示模式,可选值:box | button | string | box |
更多属性请参考 Field。
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .