Element-React Radio 單選框

在一組備選項(xiàng)中進(jìn)行單選

基礎(chǔ)用法

由于選項(xiàng)默認(rèn)可見(jiàn)，不宜過(guò)多，若選項(xiàng)過(guò)多，建議使用 Select 選擇器。

要使用 Radio 組件，需要設(shè)置value綁定變量，可以通過(guò)checked來(lái)指定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)}>備選項(xiàng)</Radio>
      <Radio value="2" checked={this.state.value === 2} onChange={this.onChange.bind(this)}>備選項(xiàng)</Radio>
    </div>
  )
}

禁用狀態(tài)

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

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

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

單選框組

適用于在多個(gè)互斥的選項(xiàng)中選擇的場(chǎng)景

結(jié)合Radio.Group元素和子元素Radio可以實(shí)現(xiàn)單選組，在Radio.Group中綁定value，在Radio中設(shè)置好value即可，無(wú)需再給每一個(gè)Radio綁定變量，另外，還提供了onChange事件來(lái)響應(yīng)變化，它會(huì)傳入一個(gè)參數(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">備選項(xiàng)</Radio>
      <Radio value="6">備選項(xiàng)</Radio>
      <Radio value="9">備選項(xiàng)</Radio>
    </Radio.Group>
  )
}

按鈕樣式

按鈕樣式的單選組合。

只需要把Radio元素?fù)Q成Radio.Button元素即可，此外，Element 還提供了size屬性給按鈕組，支持large和small兩種（如果不設(shè)定為默認(rèn)）。

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