Element-React Radio 單選框

在一組備選項中進行單選

基礎用法

由于選項默認可見，不宜過多，若選項過多，建議使用 Select 選擇器。

要使用 Radio 組件，需要設置value綁定變量，可以通過checked來指定Radio的選中狀態(tài)。

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

禁用狀態(tài)

單選框不可用的狀態(tài)。

注意：請牢記，選中的條件是綁定的變量值等于value中的值。只要在Radio元素中設置disabled屬性即可，它接受一個Boolean，true為禁用。

render() {
  return (
    <div>
      <Radio value="1" disabled={true}>備選項</Radio>
      <Radio value="2" disabled={true}>備選項</Radio>
    </div>
  )
}

單選框組

適用于在多個互斥的選項中選擇的場景

結合Radio.Group元素和子元素Radio可以實現(xiàn)單選組，在Radio.Group中綁定value，在Radio中設置好value即可，無需再給每一個Radio綁定變量，另外，還提供了onChange事件來響應變化，它會傳入一個參數(shù)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