• Radio 单选框

    单选框。

    何时使用

    代码演示

    最简单的用法。
    expand code expand code
    import { Radio } from 'choerodon-ui';
    
    ReactDOM.render(<Radio>Radio</Radio>, mountNode);
    
    一组互斥的 Radio 配合使用。
    expand code expand code
    import { Radio } from 'choerodon-ui';
    const RadioGroup = Radio.Group;
    
    class App extends React.Component {
      state = {
        value: 1,
      }
    
      onChange = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({
          value: e.target.value,
        });
      }
    
      render() {
        return (
          <RadioGroup label="这是一个label" onChange={this.onChange} value={this.state.value} disabled>
            <Radio value={1}>A</Radio>
            <Radio value={2}>B</Radio>
            <Radio value={3}>C</Radio>
            <Radio value={4}>D</Radio>
          </RadioGroup>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    通过配置 options 参数来渲染单选框。
    expand code expand code
    import { Radio } from 'choerodon-ui';
    const RadioGroup = Radio.Group;
    
    const plainOptions = ['Apple', 'Pear', 'Orange'];
    const options = [
      { label: 'Apple', value: 'Apple' },
      { label: 'Pear', value: 'Pear' },
      { label: 'Orange', value: 'Orange' },
    ];
    const optionsWithDisabled = [
      { label: 'Apple', value: 'Apple' },
      { label: 'Pear', value: 'Pear' },
      { label: 'Orange', value: 'Orange', disabled: false },
    ];
    
    class App extends React.Component {
      state = {
        value1: 'Apple',
        value2: 'Apple',
        value3: 'Apple',
      }
    
      onChange1 = (e) => {
        console.log('radio1 checked', e.target.value);
        this.setState({
          value1: e.target.value,
        });
      }
    
      onChange2 = (e) => {
        console.log('radio2 checked', e.target.value);
        this.setState({
          value2: e.target.value,
        });
      }
    
      onChange3 = (e) => {
        console.log('radio3 checked', e.target.value);
        this.setState({
          value3: e.target.value,
        });
      }
    
      render() {
        return (
          <div>
            <RadioGroup options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
            <RadioGroup options={options} onChange={this.onChange2} value={this.state.value2} />
            <RadioGroup options={optionsWithDisabled} onChange={this.onChange3} value={this.state.value3} />
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    可以为 RadioGroup 配置 name 参数,为组合内的 input 元素赋予相同的 name 属性,使浏览器把 RadioGroup 下的 Radio 真正看作是一组(例如可以通过方向键始终在同一组内更改选项)。
    expand code expand code
    import { Radio } from 'choerodon-ui';
    const RadioGroup = Radio.Group;
    
    function App() {
      return (
        <RadioGroup name="radiogroup" defaultValue={1}>
          <Radio value={1}>A</Radio>
          <Radio value={2}>B</Radio>
          <Radio value={3}>C</Radio>
          <Radio value={4}>D</Radio>
        </RadioGroup>
      );
    }
    
    ReactDOM.render(<App />, mountNode);
    
    Radio 不可用。
    expand code expand code
    import { Radio, Button } from 'choerodon-ui';
    
    class App extends React.Component {
      state = {
        disabled: true,
      }
    
      toggleDisabled = () => {
        this.setState({
          disabled: !this.state.disabled,
        });
      }
    
      render() {
        return (
          <div>
            <Radio defaultChecked={false} disabled={this.state.disabled}>Disabled</Radio>
            <br />
            <Radio defaultChecked disabled={this.state.disabled}>Disabled</Radio>
            <div style={{ marginTop: 20 }}>
              <Button type="primary" onClick={this.toggleDisabled}>
                Toggle disabled
              </Button>
            </div>
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    垂直的 RadioGroup,配合更多输入框选项。
    expand code expand code
    import { Radio, Input } from 'choerodon-ui';
    const RadioGroup = Radio.Group;
    
    class App extends React.Component {
      state = {
        value: 1,
      }
    
      onChange = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({
          value: e.target.value,
        });
      }
    
      render() {
        const radioStyle = {
          display: 'block',
          height: '30px',
          lineHeight: '30px',
        };
        return (
          <RadioGroup onChange={this.onChange} value={this.state.value}>
            <Radio style={radioStyle} value={1}>Option A</Radio>
            <Radio style={radioStyle} value={2}>Option B</Radio>
            <Radio style={radioStyle} value={3}>Option C</Radio>
            <Radio style={radioStyle} value={4}>
              More...
              {this.state.value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
            </Radio>
          </RadioGroup>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    按钮样式的单选组合。
    expand code expand code
    import { Radio } from 'choerodon-ui';
    const RadioButton = Radio.Button;
    const RadioGroup = Radio.Group;
    
    function onChange(e) {
      console.log(`radio checked:${e.target.value}`);
    }
    
    ReactDOM.render(
      <div>
        <div>
          <RadioGroup onChange={onChange} defaultValue="a">
            <RadioButton value="a">Hangzhou</RadioButton>
            <RadioButton value="b">Shanghai</RadioButton>
            <RadioButton value="c">Beijing</RadioButton>
            <RadioButton value="d">Chengdu</RadioButton>
          </RadioGroup>
        </div>
        <div style={{ marginTop: 16 }}>
          <RadioGroup onChange={onChange} defaultValue="a">
            <RadioButton value="a">Hangzhou</RadioButton>
            <RadioButton value="b" disabled>Shanghai</RadioButton>
            <RadioButton value="c">Beijing</RadioButton>
            <RadioButton value="d">Chengdu</RadioButton>
          </RadioGroup>
        </div>
        <div style={{ marginTop: 16 }}>
          <RadioGroup disabled onChange={onChange} defaultValue="a">
            <RadioButton value="a">Hangzhou</RadioButton>
            <RadioButton value="b">Shanghai</RadioButton>
            <RadioButton value="c">Beijing</RadioButton>
            <RadioButton value="d">Chengdu</RadioButton>
          </RadioGroup>
        </div>
      </div>,
      mountNode);
    
    大中小三种组合,可以和表单输入框进行对应配合。
    expand code expand code
    import { Radio } from 'choerodon-ui';
    const RadioButton = Radio.Button;
    const RadioGroup = Radio.Group;
    
    ReactDOM.render(
      <div>
        <div>
          <RadioGroup defaultValue="a" size="large">
            <RadioButton value="a">Hangzhou</RadioButton>
            <RadioButton value="b">Shanghai</RadioButton>
            <RadioButton value="c">Beijing</RadioButton>
            <RadioButton value="d">Chengdu</RadioButton>
          </RadioGroup>
        </div>
        <div style={{ marginTop: 16 }}>
          <RadioGroup defaultValue="a">
            <RadioButton value="a">Hangzhou</RadioButton>
            <RadioButton value="b">Shanghai</RadioButton>
            <RadioButton value="c">Beijing</RadioButton>
            <RadioButton value="d">Chengdu</RadioButton>
          </RadioGroup>
        </div>
        <div style={{ marginTop: 16 }}>
          <RadioGroup defaultValue="a" size="small">
            <RadioButton value="a">Hangzhou</RadioButton>
            <RadioButton value="b">Shanghai</RadioButton>
            <RadioButton value="c">Beijing</RadioButton>
            <RadioButton value="d">Chengdu</RadioButton>
          </RadioGroup>
        </div>
      </div>,
      mountNode);
    

    API

    Radio

    参数说明类型默认值
    autoFocus自动获取焦点booleanfalse
    checked指定当前是否选中booleanfalse
    defaultChecked初始是否选中booleanfalse
    value根据 value 进行比较,判断是否选中any

    RadioGroup

    单选框组合,用于包裹一组 Radio

    参数说明类型默认值
    defaultValue默认选中的值any
    nameRadioGroup 下所有 input[type="radio"]name 属性string
    options以配置形式设置子元素string[] | Array<{ label: string value: string disabled?: boolean }>
    size大小,只对按钮样式生效large | default | smalldefault
    value用于设置当前选中的值any
    onChange选项变化时的回调函数Function(e:Event)

    方法

    Radio

    名称描述
    blur()移除焦点
    focus()获取焦点