React Redux - установите все флажки

Question

Я искал в Google весь день, чтобы попытаться найти способ решить мою проблему.Я создал «страницу выбора товара» и пытаюсь добавить флажок «выбрать все», который выберет любое количество отображаемых товаров (это будет зависеть от клиента).Это идет, и у меня все флажки работают, но я не могу заставить "выбрать все", чтобы работать.По общему признанию я использую некоторые внутренние библиотеки, и я думаю, что это - то, что доставляет мне проблемы, поскольку я не могу найти примеры, которые похожи на то, что я сделал до сих пор.Итак, код для создания моей группы checkboxGroup находится здесь:

    let productSelectionList = (
      <FormGroup className="productInfo">
        <Field
          component={CheckboxGroup}
          name="checkboxField"
          vertical={true}
          choices={this.createProductList()}
          onChange={this.handleCheckboxClick}
          helpText="Select all that apply."
          label="Which accounts should use this new mailing address?"
        />
      </FormGroup>
    );

Как вы можете видеть, мой выбор будет создан в методе createProductList.Это выглядит так:

createProductList() {
    const { products } = this.props;
    const selectAllCheckbox = <b>Select All Accounts</b>;
    let productList = [];
    productList.push({ label: selectAllCheckbox, value: "selectAll" });
    if (products && products.length > 0) {
      products.forEach((product, idx) => {
        productList.push({
          label: product.productDescription,
          value: product.displayArrangementId
        });
      });
    }
    return productList;
  }

Также обратите внимание, что здесь я также создал запись «Выбрать все учетные записи» и затем поместил ее в список со значением «selectAll».Затем добавляются фактические продукты, каждый из которых имеет метку и значение (хотя отображается только метка. Конечный результат выглядит следующим образом: Флажки выбора продуктов Мне удалось выделить «выбрать все»флажок с этой функцией:

  handleCheckboxClick(event) {
    // var items = this.state.items.slice();
    if (event.selectAll) {
        this.setState({
          'isSelectAllClicked': true
        });
    } else {
        this.setState({
          'isSelectAllClicked': false
        });
    }
  }

Я также создал эту функцию componentDidUpdate:

componentDidUpdate(prevProps, prevState) {
  if (this.state.isSelectAllClicked !== prevState.isSelectAllClicked && this.state.isSelectAllClicked){

    console.log("if this ", this.state.isSelectAllClicked);
    console.log("if this ", this.props);
  } else if (this.state.isSelectAllClicked !== prevState.isSelectAllClicked && !this.state.isSelectAllClicked){
    console.log("else this ", this.state.isSelectAllClicked);
    console.log("else this ", this.props);
  }
}

Итак, в консоли я могу видеть, что когда флажок «выбрать все»щелкнув, я получаю флаг "Истина" и, отменив его, я получаю "Ложь". Но теперь, как я могу выбрать остальные поля (я признаю, что я Крайне плохо знаком с React / Redux и что у меня нетлюбой предыдущий опыт работы с флажками.) В Chrome я могу видеть мои this.props, как показано здесь .. this.props

Вы можете видеть, что this.props.productList.values.checkboxField показывает значения true для флажка «выбрать все», а также для четырех продуктов. Но это потому, что я вручную выбрал эти четыре продукта для этого тестового участника, который имеет 14 продуктов. Как я могу получитьt "выбрать все", чтобы выбрать все 14 продуктов?Я поступил об этом неправильно?(пожалуйста, скажите мне, что это все еще выполнимо): (

Answer 1

Полагаю, ваши флажки для одного продукта привязаны к некоторым имеющимся у вас данным, локальным или избыточным.Тип ввода флажка имеет checked опору, которая принимает логическое значение, которое будет определять, установлен флажок или нет.

Идея состоит в том, чтобы установить все элементы, проверенные проп (независимо от того, что вы фактически используете для этогозначение) в true после нажатия кнопки «Выбрать все».Вот пример кода, который вы можете попробовать запустить.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {
    items: [
      {
        label: "first",
        checked: false,
      },
      {
        label: "last",
        checked: false,
      }
    ],
    selectAll: false,
  }

  renderCheckbooks = (item) => {
    return (
      <div key={item.label}>
        <span>{item.label}</span>
        <input type="checkbox" checked={item.checked} />
      </div>
    );
  }

  selectAll = (e) => {
    if (this.state.selectAll) {
      this.setState({ selectAll: false }, () => {
        let items = [...this.state.items];
        items = items.map(item => {
          return {
            ...item,
            checked: false,
          }
        })
        this.setState({ items })
      });
    } else {
      this.setState({ selectAll: true }, () => {
        let items = [...this.state.items];
        items = items.map(item => {
          return {
            ...item,
            checked: true,
          }
        })
        this.setState({ items })
      });
    }
  }

  render() {
    return (
      <div className="App">
        {this.state.items.map(this.renderCheckbooks)}
        <span>Select all</span>
        <input onClick={this.selectAll} type="checkbox" checked={this.state.selectAll} />
      </div>
    );
  }
}

export default App;

У меня есть предметы в состоянии.У каждого предмета есть checked реквизит, который я передаю чекбоксу для этого предмета.Если реквизит верен, флажок будет установлен, иначе это не так.Когда я нажимаю на кнопку «Выбрать все», я сопоставляю все свои элементы, чтобы каждый из них был отмечен, чтобы флажок был установлен.

Здесь - это ссылка на коды и ящик, где вы можете увидеть это в действии.и возиться с кодом.