反应表中特定行的复选框？

Question

    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import getSchoolsList from '../Actions/Index'; 
    import ReactTable from "react-table";
    import checkboxHOC from "react-table/lib/hoc/selectTable";
    import "react-table/react-table.css";


    const CheckboxTable = checkboxHOC(ReactTable);


    class Home extends Component {

      constructor(props){
        super(props);
        this.state = {
          selection: [],
          selectAll: false
        };
      }

      componentDidMount(){
        this.props.getSchoolsList();
      }



      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(key);
        }
        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 => {
        console.log(key);
        return this.state.selection.includes(key);
      };

      logSelection = () => {
        console.log("selection:", this.state.selection);
      };
        render() {
          const { toggleSelection, toggleAll, isSelected, logSelection } = this;
          const { selectAll } = this.state;

        const checkboxProps = {
          selectAll,
          isSelected,
          toggleSelection,
          toggleAll,
          selectType: "checkbox",
        };
          const data = this.props.StateData?this.props.StateData.data:[];
          const {loading, StateData} = this.props;
        if (loading) {
          {console.log(loading)}
          return <div>Loading...</div>;
        }
        return (
          <div>
          {console.log(this.checkboxTable)}
          <button onClick={logSelection}>Log Selection</button>
          <CheckboxTable
            ref={r => (this.checkboxTable = r)}
            data={data}
            columns={[
              {
                Header: "School Name",
                accessor: "name"
              },
              {
                Header: "Location",
                id: "lastName",
                accessor: d => d.area + ',' + d.city
              },
              {
                Header: "Curriculum",
                accessor: "curriculum"
              },

              {
                Header: "Grade",
                accessor:"grade"
              },
              {
                Header: "Web App_URL",
                accessor: "webapp_url",
              },
              {
                Header: "Status",
                id: "status",
                accessor: d =>{
                  if(d.publish === true){
                    console.log(d.publish)
                    return 'Publish';
                  }else{
                    return 'Unpublished'
                  }
                }
              }
            ]}
            defaultPageSize={10}
            className="-striped -highlight"
            {...checkboxProps}
          />
        </div>
        );
        }
    }

    function mapStateToProps (state) {
      return {
        StateData:state.login.schools,
        loading: state.login.loading,
      }
    };  

    export default connect(mapStateToProps, {getSchoolsList})(Home);

Hi all, can someone help me with this what is the wrong i am not getting individual checkboxes in this ? i checked this link code in my local it is working <https://codesandbox.io/s/7yq5ylw09j?from-embed>, but whenever i add my dynamic data it is not working.

Hi all, can someone help me with this what is the wrong i am not getting individual checkboxes in this ? i checked this link code in my local it is working <https://codesandbox.io/s/7yq5ylw09j?from-embed>, but whenever i add my dynamic data it is not working.

大家好，有人可以帮我解决这个问题吗？我没有在其中获得单独的复选框？我在本地检查了此链接代码，它正在工作https://codesandbox.io/s/7yq5ylw09j?from-embed，但每当我添加动态数据时，它就不起作用。

Answer 1

如果您使用 TypeScript 和 tslint，这种情况是通过 select table(checkboxes) getdata() 的示例发生的：

const _id = opportunity.guid(); 返回 { _ID， ...物品 };

tslint 抱怨 _id var 命名为“变量名必须采用小驼峰命名、帕斯卡命名或大写命名”

您可以在以下位置看到：https://react-table.js.org/#/story/select-table-hoc

所以如果你想通过 tslint，你必须将 _id 更改为 id。从 _id 更改为 id 会破坏react-table 中需要 _id 的默认 keyField 逻辑。这需要将 keyField 属性设置为“id”。

Answer 2

如果您没有提及唯一的密钥ID，默认情况下它将采用“_id”作为关键字段。通过定义一个键值，您可以解决上述问题，如下所示。

假设有一个名为“USER ID”的特定列。我们将列的访问器作为“uid”。

代码应修改如下。

复选框表

<CheckboxTable
     keyField="uid"

......Rest of your code....

/>

切换全部（）

 toggleAll() {
   ..........code...........
      currentRecords.forEach(item => {
        selection.push(item.uid);
      });
    }
   .......code............
  }