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

更多属性请参考 Field。