Question

我是react的新手，据我所知，当您将一些数据提供给react-table时，它将遍历所有列并将其呈现到表中，当您从服务器添加数据时，这种动态方式非常有用，但是在这里，我尝试使用特定列顶部第一行中的switch按钮添加静态数据。当我添加数据时，但是切换按钮按比例呈现和循环（例如，如果添加4种不同类型的数据，则分别出现4个切换按钮），但是我需要该切换按钮只能出现在第一行并转到下一行动态行，如果我关闭了切换按钮。我正在努力，可以找到关于如何解决这种解决方案的方法。有任何想法吗？我真的很感激。谢谢

constructor(props) {
super(props);
this.state = {
  Data: this.RowData(),
  currentLot: null
};

   findNext() {
      for (let i = 0; i < this.state.Data.length; i++) {
        let lot = this.state.Data[i];
            if (lot.switched) {
             this.setState({currentLot: lot.id});
                break; 
                          }
                              }
                             }   

             show = () =>{


this.findNext();

const columns = [{
  Header: '№',
  accessor: 'id'

},
  {
    Header: 'name',
    accessor: 'name'
  },
  {
    Header: 'brand',
    accessor: 'brand'
  },
  {
    Header: 'country',
    accessor: 'country'
  },
  {
    Header: 'price',
    accessor: 'price'
  },
  {
    Header: 'total',
    accessor: 'total'
  },
  {
    Header: 'select',
    Cell: row => {
      if (row.original.id !== this.state.currentLot)
        return null;
      return <div className={'d-flex justify-content-center'}>
        <Switcher checked={row.original.switched}
                  onChange={() => {
                    row.original.switched = !row.original.switched;
                    this.setState({Data: this.state.Data})
                  }}

        /></div>
    }
  },


]
return (
  <div>

    <AppTable
      data={this.state.Data}
      columns={columns}
      defaultPageSize={4}
      showPagination={false}
      filterable={false}

    />

特定行中的React-Table渲染

0 个答案: