React-table选择所有选择框

Question

https://codesandbox.io/s/8x331yomp0

我试图在我的表格中创建一个全选复选框。当我单击标题复选框时，我也想要填充其他复选框。

我尝试使用selectAlll状态值来执行此操作，但无论出于何种原因，第一次都会返回false，因此它始终与值应该相反。有人知道什么是错的吗？我把代码沙箱放在顶部，但这是我的表代码：

import React, { Component } from "react";
import $ from "jquery";
import ReactTable from "react-table";
import "react-table/react-table.css";

const style = {
  container: {
    position: "relative"
  },

  refresh: {
    cursor: "pointer",
    width: "75px"
  }
};

class KKTable extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      timestamp: "",
      selectAll: false,
      data: [],
      checked: []
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = () => {
    var selectAll = !this.state.selectAll;
    this.setState({ selectAll: selectAll });
    var checkedCopy = [];
    this.state.data.forEach(function(e, index) {
      checkedCopy.push(selectAll);
    });
  };

  componentDidMount() {
    const data2 = [
      { one: "hi0", two: "two0", three: "three0" },
      { one: "hi1", two: "two1", three: "three1" },
      { one: "hi2", two: "two2", three: "three2" },
      { one: "hi3", two: "two3", three: "three3" },
      { one: "hi4", two: "two4", three: "three4" },
      { one: "hi5", two: "two5", three: "three5" },
      { one: "hi6", two: "two6", three: "three6" },
      { one: "hi7", two: "two7", three: "three7" },
      { one: "hi8", two: "two8", three: "three8" }
    ];

    var checkedCopy = [];
    var selectAll = this.state.selectAll;
    data2.forEach(function(e, index) {
      checkedCopy.push(selectAll);
    });

    this.setState({
      data: data2,
      checked: checkedCopy,
      selectAll: false
    });
  }

  render() {
    return (
      <div>
        <div className="container">
          <ReactTable
            data={this.state.data}
            filterable
            defaultFilterMethod={(filter, row) =>
              row[filter.id] !== undefined
                ? String(row[filter.id])
                    .toLowerCase()
                    .includes(filter.value.toLowerCase())
                : false
            }
            columns={[
              {
                Header: "One",
                accessor: "one"
              },
              {
                Header: <input type="checkbox" onChange={this.handleChange} />,
                Cell: row => (
                  <input
                    type="checkbox"
                    defaultChecked={this.state.checked[row.index]}
                  />
                ),
                sortable: false,
                filterable: false
              },
              {
                Header: "Two",
                accessor: "two"
              },
              {
                Header: "Three",
                accessor: "three"
              }
            ]}
            className="-striped "
          />
        </div>
      </div>
    );
  }
}

export default KKTable;

Answer 1

想出来。如果有人需要代码：

import React, { Component } from "react";
import $ from "jquery";
import ReactTable from "react-table";
import "react-table/react-table.css";

const style = {
  container: {
    position: "relative"
  },

  refresh: {
    cursor: "pointer",
    width: "75px"
  }
};

class KKTable extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      timestamp: "",
      selectAll: false,
      data: [],
      checked: []
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSingleCheckboxChange = this.handleSingleCheckboxChange.bind(
      this
    );
  }

  handleChange = () => {
    var selectAll = !this.state.selectAll;
    this.setState({ selectAll: selectAll });
    var checkedCopy = [];
    this.state.data.forEach(function(e, index) {
      checkedCopy.push(selectAll);
    });
    this.setState({
      checked: checkedCopy
    });
  };

  handleSingleCheckboxChange = index => {
    console.log(index);

    var checkedCopy = this.state.checked;
    checkedCopy[index] = !this.state.checked[index];
    if (checkedCopy[index] === false) {
      this.setState({ selectAll: false });
    }

    this.setState({
      checked: checkedCopy
    });
  };

  componentDidMount() {
    const data2 = [
      { one: "hi0", two: "two0", three: "three0" },
      { one: "hi1", two: "two1", three: "three1" },
      { one: "hi2", two: "two2", three: "three2" },
      { one: "hi3", two: "two3", three: "three3" },
      { one: "hi4", two: "two4", three: "three4" },
      { one: "hi5", two: "two5", three: "three5" },
      { one: "hi6", two: "two6", three: "three6" },
      { one: "hi7", two: "two7", three: "three7" },
      { one: "hi8", two: "two8", three: "three8" }
    ];

    var checkedCopy = [];
    var selectAll = this.state.selectAll;
    data2.forEach(function(e, index) {
      checkedCopy.push(selectAll);
    });

    this.setState({
      data: data2,
      checked: checkedCopy,
      selectAll: selectAll
    });
  }

  render() {
    console.log(this.state);
    return (
      <div>
        <div className="container">
          <ReactTable
            data={this.state.data}
            filterable
            defaultFilterMethod={(filter, row) =>
              row[filter.id] !== undefined
                ? String(row[filter.id])
                    .toLowerCase()
                    .includes(filter.value.toLowerCase())
                : false
            }
            columns={[
              {
                Header: "One",
                accessor: "one"
              },
              {
                Header: (
                  <input
                    type="checkbox"
                    onChange={this.handleChange}
                    checked={this.state.selectAll}
                  />
                ),
                Cell: row => (
                  <input
                    type="checkbox"
                    defaultChecked={this.state.checked[row.index]}
                    checked={this.state.checked[row.index]}
                    onChange={() => this.handleSingleCheckboxChange(row.index)}
                  />
                ),
                sortable: false,
                filterable: false
              },
              {
                Header: "Two",
                accessor: "two"
              },
              {
                Header: "Three",
                accessor: "three"
              }
            ]}
            className="-striped "
          />
        </div>
      </div>
    );
  }
}

export default KKTable;

Answer 2

你从filter.id拉出row[filter.id] !== undefined？

这可能会导致选择子项目的方式出现一些问题