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，则通过选择表（复选框）示例发生这种情况，getdata（）会这样做：

const _id =机会.guid（）; 返回{ _ID， ...项目 };

tslint抱怨_id var命名为“变量名称必须在lowerCamelCase，PascalCase或UPPER_CASE中”

您可以在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（）

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

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

2 个答案: