React Select Multi Select Флажок - С Выбрать все - PullRequest
Новая
       1

React Select Multi Select Флажок - С Выбрать все

0 голосов
/ 07 мая 2019

Я ищу какой-нибудь компонент React, у которого есть опция множественного выбора, а также опция «Выбрать все», я мог видеть несколько компонентов, но не все встроенные функции выбора.Есть указатели?

1 Ответ

0 голосов
/ 07 мая 2019

В основном вам необходимо использовать контролируемые реквизиты value и onChange. А также OnChange один на вашем флажке.

Ниже представлен один из способов сделать это: 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import "./styles.css";

const options = [
  { label: "Option 1", value: 1 },
  { label: "Option 2", value: 2 },
  { label: "Option 3", value: 3 },
  { label: "Option 4", value: 4 },
  { label: "Option 5", value: 5 },
  { label: "Option 6", value: 6 },
  { label: "Option 7", value: 7 }
];
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
      values: []
    };
  }
  onChangeCheckbox = e => {
    const isChecked = !this.state.checked;
    this.setState({
      checked: isChecked,
      values: isChecked ? options : this.state.values
    });
  };
  onChange = opt => {
    const allOptionsSelected = opt.length === options.length;
    this.setState({
      checked: allOptionsSelected ? true : false,
      values: opt
    });
  };
  render() {
    return (
      <div className="App">
        <Select
          isMulti
          onChange={this.onChange}
          options={options}
          value={this.state.values}
        />
        <p>
          <input
            onChange={this.onChangeCheckbox}
            type="checkbox"
            id="selectAll"
            value="selectAll"
            checked={this.state.checked}
          />
          <label for="selectAll">Select all</label>
        </p>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Здесь живой пример .

...