elementui单选框radio选中 Element-React Radio 单选框

在一组备选项中进行单选

基础用法

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

要使用 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>
  )
}

禁用状态

单选框不可用的状态。

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

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

单选框组

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

结合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>
  )
}

按钮样式

按钮样式的单选组合。

只需要把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