Как включить выделение всех объектов в компоненте Material-UI / SelectField?

Question

Ссылка на документ Я следую вышеупомянутому документу Ссылка для реализации компонента Select-field. Я не нашел подходящий документ для выбора всех в этом компоненте.

Оператор импорта для компонента

import SelectField from 'material-ui/SelectField'; 

Код компонента:

<SelectField
    className="search_items"
    multiple={true}
    hintText="Select Item"
    value={values}
    onChange={this.handleChange} >
    {this.menuItems(values)}
 </SelectField>

menuItems Функция:

menuItems(values) {
     return unique && unique.map((name) => (
        <MenuItem
            key={name}
            insetChildren={true}
            checked={values && values.indexOf(name) > -1}
            value={name}
            primaryText={name && name.concat('(').concat(sectors.filter(i => i === name).length).concat(')')}
        />
    ));
}

Функция OnChange:

handleChange(event, index, values) {
    this.setState({ values })
}

Как включить опцию select all для всех элементов, которые будут выбраны. Заранее спасибо

Answer 1

Создайте MenuItem над всеми вариантами выбора.

<SelectField
        multiple={true}
        hintText="Multiple Select"
        value={values}
        onChange={this.handleChange}
      >
          <MenuItem
            checked={this.state.open}
            value="Select all"
            onClick={this.selectAll}
            primaryText={checkedAll?"Select None":"Select all"}
          />
        {this.menuItems(values)}
      </SelectField>

Создает состояние checkedAll, которое обновляется при каждом нажатии на элемент Select All. При каждом нажатии SelectAll MenuItem обновляйте значения до требуемых данных (здесь уникальных) с помощью функции.

selectAll = () => {
    if(this.state.checkedAll)
      this.setState(
        {values:[]}
      );
    else
      this.setState(
        {values:names}
      );
    this.setState({
      checkedAll:!this.state.checkedAll
    });
  }

Посмотрите демоверсию SandBox по этой ссылке