Question

我正在尝试找到与我的反应应用程序一起使用的最佳表格，而目前，react-table提供了我需要的一切（分页，服务器端控制，过滤，排序，页脚行）。

这就是说，我似乎无法选择一行。没有examples表明这一点。

我尝试过的一些事情包括尝试在点击该行时设置className。但我似乎无法在e和t中找到调用元素。此外，我不喜欢这种方法，因为反应应用程序不应该如何做事。

<ReactTable
            ...
            getTrProps={(state, rowInfo, column, instance) => {
                return {
                    onClick: (e, t) => {
                        t.srcElement.classList.add('active')
                    },
                    style: {
                    }
                }
            }}
        />

一些可能的解决方法是将复选框渲染为第一列，但这不是最佳选择，因为它限制了单击以“激活”该行的区域。此外，视觉反馈将不那么富有表现力。

我在房间里想念大象吗？如果没有，你知道另一个支持我之前描述的事情的图书馆吗？

谢谢！

修改另一种选择，即开源，是建议编辑。也许这是正确的事情。

编辑2

另一件事，由DavorinRuševljan在评论中提出，但我无法使其发挥作用：

onRowClick(e, t, rowInfo) {
    this.setState((oldState) => {
        let data = oldState.data.slice();
        let copy = Object.assign({},  data[rowInfo.index]);

        copy.selected = true;
        copy.FirstName = "selected";
        data[rowInfo.index] = copy;

        return {
            data: data,
        }
    })
}

....

            getTrProps={(state, rowInfo, column) => {
                return {
                    onClick: (e, t) => { this.onRowClick(e, t, rowInfo) },
                    style: {
                        background: rowInfo && rowInfo.row.selected ? 'green' : 'red'
                    }
                }
            }}

这会将'FirstName'列设置为'selected'，但不会将类设置为'green'

Answer 1

经过几次尝试后我找到了解决方案，希望这可以帮到你。将以下内容添加到<ReactTable>组件中：

getTrProps={(state, rowInfo) => {
  if (rowInfo && rowInfo.row) {
    return {
      onClick: (e) => {
        this.setState({
          selected: rowInfo.index
        })
      },
      style: {
        background: rowInfo.index === this.state.selected ? '#00afec' : 'white',
        color: rowInfo.index === this.state.selected ? 'white' : 'black'
      }
    }
  }else{
    return {}
  }
}

在state中忘记添加空selected值，例如：

state = { selected: null }

Answer 2

React-Table包含一个HOC，允许选择，即使在过滤和分页表时，设置也比基本表稍微先进一些，因此请首先阅读下面链接中的信息。

导入HOC之后，您可以通过必要的方法像这样使用它：

<ng-select [items]="cars" [(ngModel)]="owner.carId">
    <ng-option *ngFor="let car of cars" [value]="car.id">{{car.id.name}}></ng-option>
</ng-select>

有关更多信息，请参见此处：
https://github.com/tannerlinsley/react-table/tree/v6#selecttable

这是一个可行的示例：
https://react-table.js.org/#/story/select-table-hoc

Answer 3

我不熟悉，react-table，所以我不知道它有直接支持选择和取消选择（如果有的话会很好）。

如果没有，使用您已经拥有的代码片段可以安装onCLick处理程序。现在，您可以修改状态，而不是尝试将样式直接附加到行，例如将selected：true添加到行数据。这将引发重新投降。现在，您只需覆盖选定的=== true呈现的行的方式。沿着以下几点：

// Any Tr element will be green if its (row.age > 20) 
<ReactTable
  getTrProps={(state, rowInfo, column) => {
    return {
      style: {
        background: rowInfo.row.selected ? 'green' : 'red'
      }
    }
  }}
/>

Answer 4

如果你想在选择行上有多个选择..

import React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
import { ReactTableDefaults } from 'react-table';
import matchSorter from 'match-sorter';


class ThreatReportTable extends React.Component{

constructor(props){
  super(props);

  this.state = {
    selected: [],
    row: []
  }
}
render(){

  const columns = this.props.label;

  const data = this.props.data;

  Object.assign(ReactTableDefaults, {
    defaultPageSize: 10,
    pageText: false,
    previousText: '<',
    nextText: '>',
    showPageJump: false,
    showPagination: true,
    defaultSortMethod: (a, b, desc) => {
    return b - a;
  },


  })

    return(
    <ReactTable className='threatReportTable'
        data= {data}
        columns={columns}
        getTrProps={(state, rowInfo, column) => {


        return {
          onClick: (e) => {


            var a = this.state.selected.indexOf(rowInfo.index);


            if (a == -1) {
              // this.setState({selected: array.concat(this.state.selected, [rowInfo.index])});
              this.setState({selected: [...this.state.selected, rowInfo.index]});
              // Pass props to the React component

            }

            var array = this.state.selected;

            if(a != -1){
              array.splice(a, 1);
              this.setState({selected: array});


            }
          },
          // #393740 - Lighter, selected row
          // #302f36 - Darker, not selected row
          style: {background: this.state.selected.indexOf(rowInfo.index) != -1 ? '#393740': '#302f36'},


        }


        }}
        noDataText = "No available threats"
        />

    )
}
}


  export default ThreatReportTable;

Answer 5

动态样式的另一种机制是在JSX中为您的组件定义它。例如，以下内容可用于在React tic-tac-toe教程中选择性地设置当前步骤的样式（建议的额外信用增强之一：

  return (
    <li key={move}>
      <button style={{fontWeight:(move === this.state.stepNumber ? 'bold' : '')}} onClick={() => this.jumpTo(move)}>{desc}</button>
    </li>
  );

当然，更简洁的方法是添加/删除“选定的”CSS类，但这种直接方法在某些情况下可能会有所帮助。

Answer 6

您选择的答案是正确的，但是，如果您使用的是排序表，则将崩溃，因为在搜索时rowInfo将变得不确定，因此建议您改用此功能

                getTrGroupProps={(state, rowInfo, column, instance) => {
                    if (rowInfo !== undefined) {
                        return {
                            onClick: (e, handleOriginal) => {
                              console.log('It was in this row:', rowInfo)
                              this.setState({
                                  firstNameState: rowInfo.row.firstName,
                                  lastNameState: rowInfo.row.lastName,
                                  selectedIndex: rowInfo.original.id
                              })
                            },
                            style: {
                                cursor: 'pointer',
                                background: rowInfo.original.id === this.state.selectedIndex ? '#00afec' : 'white',
                                color: rowInfo.original.id === this.state.selectedIndex ? 'white' : 'black'
                            }
                        }
                    }}
                }

Answer 7

带有复选框的多行，并使用useState()挂钩选择所有行。需要较小的实施才能适应自己的项目。

    const data;
    const [ allToggled, setAllToggled ] = useState(false);
    const [ toggled, setToggled ] = useState(Array.from(new Array(data.length), () => false));
    const [ selected, setSelected ] = useState([]);

    const handleToggleAll = allToggled => {
        let selectAll = !allToggled;
        setAllToggled(selectAll);
        let toggledCopy = [];
        let selectedCopy = [];
        data.forEach(function (e, index) {
            toggledCopy.push(selectAll);
            if(selectAll) {
                selectedCopy.push(index);
            }
        });
        setToggled(toggledCopy);
        setSelected(selectedCopy);
    };

    const handleToggle = index => {
        let toggledCopy = [...toggled];
        toggledCopy[index] = !toggledCopy[index];
        setToggled(toggledCopy);
        if( toggledCopy[index] === false ){
            setAllToggled(false);
        }
        else if (allToggled) {
            setAllToggled(false);
        }
    };

....


                Header: state => (
                    <input
                        type="checkbox"
                        checked={allToggled}
                        onChange={() => handleToggleAll(allToggled)}
                    />
                ),
                Cell: row => (
                    <input
                        type="checkbox"
                        checked={toggled[row.index]}
                        onChange={() => handleToggle(row.index)}
                    />
                ),

....

<ReactTable

...
                    getTrProps={(state, rowInfo, column, instance) => {
                        if (rowInfo && rowInfo.row) {
                            return {
                                onClick: (e, handleOriginal) => {
                                    let present = selected.indexOf(rowInfo.index);
                                    let selectedCopy = selected;

                                    if (present === -1){
                                        selected.push(rowInfo.index);
                                        setSelected(selected);
                                    }

                                    if (present > -1){
                                        selectedCopy.splice(present, 1);
                                        setSelected(selectedCopy);
                                    }

                                    handleToggle(rowInfo.index);
                                },
                                style: {
                                    background: selected.indexOf(rowInfo.index)  > -1 ? '#00afec' : 'white',
                                    color: selected.indexOf(rowInfo.index) > -1 ? 'white' : 'black'
                                },
                            }
                        }
                        else {
                            return {}
                        }
                    }}
/>

Answer 8

# react-table with edit button #
const [rowIndexState, setRowIndexState] = useState(null);
const [rowBackGroundColor, setRowBackGroundColor] = useState('')
{...row.getRowProps({
  onClick: (e) => {
    if (!e.target.cellIndex) {
       setRowIndexState(row.index);
       setRowBackGroundColor('#f4f4f4')
    }
  },
  style: {
   background: row.index === rowIndexState ? rowBackGroundColor : '',
  },              
})}

选择click react-table

8 个答案: