使用分页ReactJS在表中批量选择

Question

我在从表中批量选择行时遇到问题。事实是，例如，如果我单击表中的“全选”按钮并转到下一页，则所有元素都将被取消选中。

我使用服务器上的分页。也就是说，我不知道哪些元素将被加载到新页面上并且需要选择它们是合乎逻辑的。有办法解决这个问题吗？ video

  //Method that generates the checkbox "Select all"

  renderBulkSelector() {
    if (Rails.abilities.manageLead === false) return null;

    const { selectedItems, records } = this.props;

    const selectedItemsCount = Object.keys(selectedItems).length;
    let checked = records.data && selectedItemsCount === records.data.length;

    if (checked === undefined) {
      checked = false;
    }
    const checkedProp = {
      checked,
      onChange: () => {},
      onClick:  this.onBulkSelect,
    };

    const id = UUID();

    return (
      <th className="d-md-table-cell text-center" width="1%">
        <div className="custom-control custom-checkbox mt5">
          <input type="checkbox" className="custom-control-input" id={id} {...checkedProp} />
          <label className="custom-control-label custom-control-heading-label" htmlFor={id} />
        </div>
      </th>
    );
  }

  onBulkSelect() {
    const { table, records, selectedItems } = this.props;
    if (!records.data) return; // Fix for https://github.com/brokerkit/webapp/issues/2274
    const selectedItemsCount = Object.keys(selectedItems).length;
    const checked = records.data && selectedItemsCount === records.data.length;

    this.setState({
      tableBulkSelecting: !checked,
    });

    if (!checked) {
      AgentActions.selectLeadItems(table, records.data);
    } else {
      AgentActions.deselectLeadItems(table, records.data);
    }
  }