Question

我在表上有一个复选框，选中后，我想将填充表中数据的值追加到数组中（在下面的代码中为element.link）。

我已经有一个单击复选框时会调用的toggleRow方法，但是单击复选框时如何将匹配的element.link附加到数组上？

 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

您要在哪个数组后面附加element.link？

仅使用array.push()方法是将值附加到数组的最简单方法。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

const arr = []

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

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

1 个答案: