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'
            },
        }
    }
}}

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

1 个答案: