javascript - React Table を更新して、送信後に行が選択されないようにする

Question

編集 -

ここでこの例を使用していますreact-table select table (HOC)

上記のリンクのサンプル コードにこのコードを追加するだけで、達成しようとしている結果が得られます。

  logSelection = () => {
    console.log('selection:', this.state.selection);
    this.setState({ selection: [] });
  }

バックグラウンド

React.js アプリケーションで react-table を使用しています。具体的には、各行の横にチェックボックスを提供する選択テーブルを使用しています。私の場合、これにより、ユーザーは複数の行を選択できます。ユーザーが選択内容を送信すると、選択した行のデータがアプリケーションで他の用途に送信されます。

提出後、状態で保持されているデータをクリアしています。これは、後ですぐに別の提出を行う必要がある場合に重要です。以前に選択された各行を保持している状態配列からデータをクリアした後、データが状態配列に保持されなくなっても、テーブルには以前に選択された行が表示されたままになります。

サンプルコード

これは、選択した配列を保持している配列をクリアする方法です。

  exportExcel() {
    this.setState({ selection: [], selectAll: false });
  }

これは、クラス内のすべての関連コードです。

import React, {Component} from 'react';
import _ from 'lodash';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input } from 'reactstrap';
import ReactTable from 'react-table';
import checkboxHOC from 'react-table/lib/hoc/selectTable';
import 'react-table/react-table.css';
import Chance from 'chance';
import { connect } from 'react-redux';
import { fetchOdx } from '../../store/actions/Odx';

const CheckboxTable = checkboxHOC(ReactTable);
const chance = new Chance();

class TypeAHead extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showRow: false,
      showExcelForm: false,
      modal: false,
      selection: [],
      selectAll: false,
      state: {},
      row: {},
      column: {},
      instance: {},
      data: [],
    };
    this.showRow = this.showRow.bind(this);
    this.showExcelForm = this.showExcelForm.bind(this);
    this.toggleSelection = this.toggleSelection.bind(this);
    this.toggleAll = this.toggleAll.bind(this);
    this.isSelected = this.isSelected.bind(this);
    this.exportExcel = this.exportExcel.bind(this);
    this.setClientEmail = this.setClientEmail.bind(this);

    this.props.fetchOdx();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.odxData) {
      this.setState({
        data: nextProps.odxData
      });
    }
  }

  showRow() {
    this.setState({
      showRow: !this.state.showRow
    });
  }

  showExcelForm() {
    this.setState({
      clientEmail: '',
      showExcelForm: !this.state.showExcelForm
    });
  }

  toggleSelection(key, shift, row) {
    let selection = [
      ...this.state.selection
    ];
    const keyIndex = selection.indexOf(key);
    if (keyIndex >= 0) {
      selection = [
        ...selection.slice(0, keyIndex),
        ...selection.slice(keyIndex + 1)
      ];
    } else {
      selection.push(row);
    }
    this.setState({ selection });
  }

  toggleAll() {
    const selectAll = this.state.selectAll ? false : true;
    const selection = [];
    if (selectAll) {
      const wrappedInstance = this.checkboxTable.getWrappedInstance();
      const currentRecords = wrappedInstance.getResolvedState().sortedData;
      currentRecords.forEach((item) => {
        selection.push(item._original._id);
      });
    }
    this.setState({ selectAll, selection });
  }

  isSelected(key) {
    this.state.selection.includes(key);
  }

  setClientEmail(event) {
    this.setState({ clientEmail: event.target.value.toLowerCase() });
  }

  exportExcel(event) {
    this.setState({ selection: [], selectAll: false });
    this.showExcelForm();
  }

  render() {
    const { toggleSelection, toggleAll, isSelected } = this;
    const { selectAll, } = this.state;
    const checkboxProps = {
      toggleSelection,
      toggleAll,
      isSelected,
      selectAll,
      selectType: 'checkbox',
    };
    const columns = [{
      Header: 'DebtCltRefNo',
      accessor: 'DebtCltRefNo'
    }, {
      Header: 'DbtrDebtorType',
      accessor: 'DbtrDebtorType',
    }];
    return (
      <div>
        <Button onClick={this.showExcelForm} color="success" size="lg" block>Export Excel</Button>
        <CheckboxTable
          data={this.state.data}
          columns={columns}
          className="-striped -highlight"
          defaultPageSize={10}
          ref={(r) => this.checkboxTable = r}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          getTdProps={(state, row, column, instance) => ({
            onClick: e => {
              const r = row.original;
              this.setState({ state, row: r, column, instance });
              this.showRow();
            }})}
          {...checkboxProps}
        />
        <div>
          <Modal isOpen={this.state.showRow} toggle={this.showRow}>
            <ModalHeader toggle={this.showRow}>{this.state.row.DebtCltRefNo}</ModalHeader>
            <ModalBody>
              DbtrDebtorType: {this.state.row.DbtrDebtorType}<br />
              DebtType: {this.state.row.DebtType}<br />
            </ModalBody>
            <ModalFooter>
              <Button color="danger" onClick={this.toggle}>Cancel</Button>
            </ModalFooter>
          </Modal>
        </div>
        <div>
          <Modal isOpen={this.state.showExcelForm} toggle={this.showExcelForm}>
            <ModalHeader toggle={this.showExcelForm}>Grant Client Access</ModalHeader>
            <ModalBody>
              <Form>
                <FormGroup>
                  <Label for="clientEmail">Client's Email Address</Label>
                  <Input value={this.state.clientEmail} onChange={this.setClientEmail} type="email" name="clientEmail" id="clientEmail" placeholder="Client's Email Address" />
                </FormGroup>
              </Form>
            </ModalBody>
            <ModalFooter>
              <Button color="danger" onClick={this.showExcelForm}>Cancel</Button>
              <Button color="success" onClick={this.exportExcel}>Submit</Button>
            </ModalFooter>
          </Modal>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  if (state.Odx.odx) {
    let data = state.Odx.odx;
    data = _.forEach([...data], (o) => o._id = chance.guid());
    return {
      odxData: data
    };
  } else {
    return {};
  }
};

const mapDispatchToProps = dispatch => ({
  fetchOdx: () => dispatch(fetchOdx()),
});

export default connect(mapStateToProps, mapDispatchToProps)(TypeAHead);

質問

フォームの送信後にテーブルを更新して、どの行にもチェック ボックスがオンにならないようにするにはどうすればよいですか? または、言い換えれば、選択された行を示す状態配列とテーブルを一致させるにはどうすればよいですか? 私の場合、状態配列を空の配列に更新した後も、選択した行が UI で選択されたままになります。