Radio 单选框

Radio 单选框

在一组备选项中进行单选

基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

:::demo 要使用 Radio 组件，需要设置value绑定变量，可以通过checked来指定Radio的选中状态。

constructor(props) {
  super(props);

  this.state = {
    value: 1
  }
}

onChange(value) {
  this.setState({ value });
}

render() {
  return (
    <div>
      <Radio value="1" checked={this.state.value === 1} onChange={this.onChange.bind(this)}>备选项</Radio>
      <Radio value="2" checked={this.state.value === 2} onChange={this.onChange.bind(this)}>备选项</Radio>
    </div>
  )
}

:::

禁用状态

单选框不可用的状态。

:::demo 注意：请牢记，选中的条件是绑定的变量值等于value中的值。只要在Radio元素中设置disabled属性即可，它接受一个Boolean，true为禁用。

render() {
  return (
    <div>
      <Radio value="1" disabled={true}>备选项</Radio>
      <Radio value="2" disabled={true}>备选项</Radio>
    </div>
  )
}

:::

单选框组

适用于在多个互斥的选项中选择的场景

:::demo 结合Radio.Group元素和子元素Radio可以实现单选组，在Radio.Group中绑定value，在Radio中设置好value即可，无需再给每一个Radio绑定变量，另外，还提供了onChange事件来响应变化，它会传入一个参数value。

constructor(props) {
  super(props);

  this.state = {
    value: 3
  }
}

onChange(value) {
  this.setState({ value });
}

render() {
  return (
    <Radio.Group value={this.state.value} onChange={this.onChange.bind(this)}>
      <Radio value="3">备选项</Radio>
      <Radio value="6">备选项</Radio>
      <Radio value="9">备选项</Radio>
    </Radio.Group>
  )
}

:::

按钮样式

按钮样式的单选组合。

:::demo 只需要把Radio元素换成Radio.Button元素即可，此外，Element 还提供了size属性给按钮组，支持large和small两种（如果不设定为默认）。

constructor(props) {
  super(props);

  this.state = {
    radio3: '上海',
    radio4: '上海',
    radio5: '上海'
  }
}

onChange(key, value) {
  this.setState({
    [key]: value
  });
}

render() {
  return (
    <div>
      <Radio.Group value={this.state.radio3} onChange={this.onChange.bind(this, 'radio3')}>
        <Radio.Button value="上海" />
        <Radio.Button value="北京" />
        <Radio.Button value="广州" />
        <Radio.Button value="深圳" />
      </Radio.Group>
      <Radio.Group value={this.state.radio4} onChange={this.onChange.bind(this, 'radio4')}>
        <Radio.Button value="上海" />
        <Radio.Button value="北京" />
        <Radio.Button value="广州" disabled={true} />
        <Radio.Button value="深圳" />
      </Radio.Group>
      <Radio.Group value={this.state.radio5} disabled={true}>
        <Radio.Button value="上海" />
        <Radio.Button value="北京" />
        <Radio.Button value="广州" />
        <Radio.Button value="深圳" />
      </Radio.Group>
    </div>
  )
}

:::

Radio Attributes

Radio-group Attributes

Radio-group Events

Radio-button Attributes