Флажок для конкретной строки в реагирующей таблице?

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 = chance.guid (); return {_id,... item};

tslint жалуется на имя _id var с именем "имя переменной должно быть в lowerCamelCase, PascalCase или UPPER_CASE"

Вы можете увидеть это по адресу: https://react-table.js.org/

Поэтому вы должны изменить _id на id, если вы хотите пройти tslint. Переход от _id к id нарушает логику keyField по умолчанию в реагирующей таблице, которая хочет _id. Для этого необходимо установить для свойства keyField значение "id".

Answer 2

Если вы не укажете уникальный идентификатор ключа по умолчанию, в качестве поля ключа будет использоваться "_id". Определив ключевое значение, вы можете решить вышеупомянутую проблему следующим образом.

Допустим, есть определенный столбец с именем "USER ID". И мы возьмем аксессор столбца как "uid".

Код следует изменить следующим образом.

Таблица флажков

<CheckboxTable
     keyField="uid"

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

/>

переключить все()

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