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

请在此处查看答案：Select row on 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'
            },
        }
    }
}}