mercredi 19 décembre 2018

React Redux - select all checkbox

I have been searching on Google all day to try and find a way to solve my issue. I've created a "product selection page" and I'm trying to add a "select all" checkbox that will select any number of products that are displayed (this will vary depending on the customer). It's coming along and I've got all the checkboxes working but I can't get "select all" to work. Admittedly I'm using some in-house libraries and I think that's what's giving me trouble as I'm unable to find examples that look like what I've done so far. OK, so the code to create my checkboxGroup is here:

    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>
    );

As you can see, my choices will be created in the createProductList method. That looks like this:

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;
  }

Also note that here I've also created the "Select All Accounts" entry and then pushed it onto the list with a value of "selectAll". The actual products are then pushed on, each having a label and a value (although only the label is displayed. The end result looks like this: Select Products checkboxes I've managed to isolate the "select all" checkbox with this function:

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

I also created this componentDidUpdate function:

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);
  }
}

So in the console, I'm able to see that when the "select all" checkbox is clicked, I do get a "True" flag, and unclicking it I get a "False". But now how can I select the remaining boxes (I will admit that I am EXTREMELY new to React/Redux and that I don't have any previous checkboxes experience). In Chrome, I'm able to see my this.props as shown here.. this.props

You can see that this.props.productList.values.checkboxField shows the values of true for the "select all" checkbox as well as for four of the products. But that's because I manually checked off those four products for this test member that has 14 products. How can I get "check all" to select all 14 products? Did I go about this the wrong way? (please tell me that this is still doable) :(




Aucun commentaire:

Enregistrer un commentaire