如何通过复选框将值附加到数组？

Question

I have checkboxes on a table that, when checked, I would like to append values to an array from the data populating the table (element.link in my code below).

I already have an toggleRow method that is called when a checkbox is clicked, but how can I append the matching element.link to an array when a checkbox is clicked?

 componentDidMount() {
    const _self = this;

    fetch(config.api.urlFor('xxx'))
    .then((response) => response.json())
    .then((data) => {

      const tableContent = [];

      data.array.forEach(element => {
        tableContent.push({
          date: element.date,
          title: element.title,
          link: <Link to='' onClick={(e)=> {e.preventDefault(); this.getPreauthorizedLink(element.link)}}>Report</Link>
        });

      })

      this.setState({reportJSON: tableContent || [], tableIsBusy: false})

    })
    .catch((err) => _self.setState({tableIsBusy: false }));
  }

  toggleRow(name, id) {
    const newSelected = Object.assign({}, this.state.selected);
    if(newSelected[name]){
      delete newSelected[name]
    }else {
          newSelected[name] = !this.state.selected[name];
    }
    this.setState({
            selected: newSelected,
            selectAll: 2
        });
    }

  toggleSelectAll() {
    let newSelected = {};

    if (this.state.selectAll === 0) {
        this.state.data.forEach(x => {
            newSelected[x.firstName] = true;
        });
    }
    }

  render() {

    const {reportJSON} = this.state; 

    const content = (      
      <div className="container">
        <div className="card mb-3">
        <div className="card-header">
              <div className="float-left">
                <i className="fas fa-list mr-1"></i>
                xxx
              </div>
              <div className="float-right">
                <DownloadReportsButton />
              </div>
              </div>            
              <div className="card-body">
              <div className="table-responsive">
              <Busy isBusy={this.state.tableIsBusy}>
                  <ReactTable
                    data={reportJSON}
                    filterable
                    defaultFilterMethod={(filter, row) =>
                    String(row[filter.accessor]) === filter.value}
                    columns={[
                      {
                        id: "checkbox",
                        accessor: "",
                        Cell: ({ original }) => {
                          return (
                            <input
                              type="checkbox"
                              className="checkbox"
                              checked={this.state.selected[original.firstName] === true}
                              onChange={() => this.toggleRow(original.firstName)}
                            />
                          );
                        },
                        Header: x => {
                          return (
                              <input
                                  type="checkbox"
                                  className="checkbox"
                                  checked={this.state.selectAll === 1}
                                  ref={input => {
                                      if (input) {
                                          input.indeterminate = this.state.selectAll === 2;
                                      }
                                  }}
                                  onChange={() => this.toggleSelectAll()}
                              />
                          );
                      },
                        sortable: false,
                        width: 45
                      },
                      { Header: 'Date', 
                        accessor: 'date', 
                        maxWidth: 120,
                        filterMethod: (filter, rows) =>
                        matchSorter(rows, filter.value, { keys: ["date"] }),
                        filterAll: true},

                      { Header: 'Title', 
                        accessor: 'title',
                        filterMethod: (filter, rows) =>
                        matchSorter(rows, filter.value, { keys: ["title"] }),
                        filterAll: true},

                      { Header: 'Link', 
                        accessor: 'link', 
                        maxWidth: 120},
                    ]}
                    loading={this.state.tableIsBusy}
                  />
              </Busy>
              </div>
            </div>
            <div className="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
          </div>
      </div>
    )

Answer 1

Which array are you trying to append the element.link to?

Simply using the array.push() method is the easiest way to append a value to an array. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

const arr = []

toggleRow(element) {
  arr.push(element.link)
}