React-Table：如果用鼠标单击（选择）行的背景颜色，该如何更改？

Question

我有以下代码用于检索单击行的数据：

    <ReactTable
      getTdProps={(state, rowInfo, column, instance) => {
        return {
          onClick: (e, handleOriginal) => {
            if (typeof rowInfo !== "undefined") this.rowClick(rowInfo.row.RecipeName);
            if (handleOriginal) {
              handleOriginal()
            }
          }
        }
      }}

如何更改点击行的背景颜色？或突出显示单击的行的最佳方法是什么？

Answer 1

请在此处查看答案：在click react-table上选择行

这是我的代码：

首先，您需要一个状态：

  this.state = {
    selected: -1
  };

-1很重要，因为否则索引0的行将高亮显示，而无需单击它。

而getTdProps看起来是这样的：

getTrProps={(state, rowInfo, column, instance) => {
    if (typeof rowInfo !== "undefined") {
        return {
            onClick: (e, handleOriginal) => {
                this.setState({
                selected: rowInfo.index
                });
                if (handleOriginal) {
                handleOriginal()
                }
            },
            style: {
                background: rowInfo.index === this.state.selected ? '#00afec' : 'white',
                color: rowInfo.index === this.state.selected ? 'white' : 'black'
            },
        }
    }
    else {
        return {
            onClick: (e, handleOriginal) => {
                if (handleOriginal) {
                handleOriginal()
                }
            },
            style: {
                background: 'white',
                color: 'black'
            },
        }
    }
}}