Element-React Checkbox 多選框

一組備選項中進(jìn)行多選

基礎(chǔ)用法

單獨使用可以表示兩種狀態(tài)之間的切換。

簡單的 Checkbox，使用checked切換選中狀態(tài)。

render() {
  return <Checkbox checked>備選項</Checkbox>
}

禁用狀態(tài)

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

設(shè)置disabled屬性即可。

render() {
  return (
    <div>
      <Checkbox disabled>備選項1</Checkbox>
      <Checkbox checked disabled>備選項2</Checkbox>
    </div>
  )
}

多選框組

適用于多個勾選框綁定到同一個數(shù)組的情景，通過是否勾選來表示這一組選項中的項。

Checkbox.Group 元素能把多個 checkbox 管理為一組，只需要在 Group 中使用value綁定 Array 類型的變量即可，label屬性除了改變 checkbox 按鈕后的介紹外，同時也是該 checkbox 對應(yīng)的值，label與數(shù)組中的元素值相對應(yīng)，如果存在指定的值則為選中狀態(tài)，否則為不選中。

constructor(props) {
  super(props);


  this.state = {
    checkList: ['復(fù)選框 A', '選中且禁用']
  }
}
render() {
  return (
    <Checkbox.Group value={this.state.checkList}>
      <Checkbox label="復(fù)選框 A"></Checkbox>
      <Checkbox label="復(fù)選框 B"></Checkbox>
      <Checkbox label="復(fù)選框 C"></Checkbox>
      <Checkbox label="禁用" disabled></Checkbox>
      <Checkbox label="選中且禁用" disabled></Checkbox>
    </Checkbox.Group>
  )
}

indeterminate狀態(tài)

indeterminate屬性用以表示 checkbox 的不確定狀態(tài)，一般用于實現(xiàn)全選的效果

設(shè)置indeterminate屬性該表 checkbox 不確定狀態(tài).

constructor(props) {
  super(props);


  this.state = {
    checkAll: false,
    cities: ['上海', '北京', '廣州', '深圳'],
    checkedCities: ['上海', '北京'],
    isIndeterminate: true,
  }
}


handleCheckAllChange(checked) {
  const checkedCities = checked ? ['上海', '北京', '廣州', '深圳'] : [];


  this.setState({
    isIndeterminate: false,
    checkAll: checked,
    checkedCities: checkedCities,
  });
}


handleCheckedCitiesChange(value) {
  const checkedCount = value.length;
  const citiesLength = this.state.cities.length;


  this.setState({
    checkedCities: value,
    checkAll: checkedCount === citiesLength,
    isIndeterminate: checkedCount > 0 && checkedCount < citiesLength,
  });
}


render() {
  return (
    <div>
      <Checkbox
        checked={this.state.checkAll}
        indeterminate={this.state.isIndeterminate}
        onChange={this.handleCheckAllChange.bind(this)}>全選</Checkbox>
      <div style={{margin: '15px 0'}}></div>
      <Checkbox.Group
        value={this.state.checkedCities}
        onChange={this.handleCheckedCitiesChange.bind(this)}>
        {
          this.state.cities.map((city, index) =>
            <Checkbox key={index} label={city}></Checkbox>
          )
        }
      </Checkbox.Group>
    </div>
  )
}

可選項目數(shù)量的限制

使用 min 和 max 屬性能夠限制可以被勾選的項目的數(shù)量。

constructor(props) {
  super(props);


  this.state = {
    checkAll: false,
    cities: ['上海', '北京', '廣州', '深圳'],
    checkedCities: ['上海', '北京'],
    isIndeterminate: true,
  }
}


handleCheckAllChange(checked) {
  const checkedCities = checked ? ['上海', '北京', '廣州', '深圳'] : [];


  this.setState({
    isIndeterminate: false,
    checkAll: checked,
    checkedCities: checkedCities,
  });
}


handleCheckedCitiesChange(value) {
  const checkedCount = value.length;
  const citiesLength = this.state.cities.length;


  this.setState({
    checkedCities: value,
    checkAll: checkedCount === citiesLength,
    isIndeterminate: checkedCount > 0 && checkedCount < citiesLength,
  });
}


render() {
  return (
    <div>
      <Checkbox
        checked={this.state.checkAll}
        indeterminate={this.state.isIndeterminate}
        onChange={this.handleCheckAllChange.bind(this)}>全選</Checkbox>
      <div style={{margin: '15px 0'}}></div>
      <Checkbox.Group
        min="1"
        max="2"
        value={this.state.checkedCities}
        onChange={this.handleCheckedCitiesChange.bind(this)}>
        {
          this.state.cities.map((city, index) =>
            <Checkbox key={index} label={city}></Checkbox>
          )
        }
      </Checkbox.Group>
    </div>
  )
}

按鈕樣式

按鈕樣式的多選組合。

只需要把Checkbox元素替換為Checkbox.Button元素即可。此外，Element 還提供了size屬性，支持large和small兩種。

constructor(props) {
  super(props);


  this.state = {
    cities: ['上海', '北京', '廣州', '深圳'],
    checkboxGroup1: ['上海'],
    checkboxGroup2: ['北京'],
    checkboxGroup3: ['廣州']
  }
}


render() {
  return (
    <div>
      <div style={{margin: '15px 0'}}></div>
      <Checkbox.Group value={this.state.checkboxGroup1}>
        {
          this.state.cities.map((city, index) => {
            return <Checkbox.Button key={index} label={city}>{city}</Checkbox.Button>
          })
        }
      </Checkbox.Group>
      <div style={{margin: '15px 0'}}></div>
      <Checkbox.Group value={this.state.checkboxGroup2} size="small">
        {
          this.state.cities.map((city, index) => {
            return <Checkbox.Button key={index} label={city} disabled={city === '深圳'}>{city}</Checkbox.Button>
          })
        }
      </Checkbox.Group>
      <div style={{margin: '15px 0'}}></div>
      <Checkbox.Group value={this.state.checkboxGroup3} size="large" fill="#324057" textColor="#a4aebd" min="1" max="3">
        {
          this.state.cities.map((city, index) => {
            return <Checkbox.Button key={index} label={city}>{city}</Checkbox.Button>
          })
        }
      </Checkbox.Group>
    </div>
  )
}

Checkbox Attributes

Checkbox.Group Attributes

Checkbox.Group Events