在点击反应表上选择行

Question

我正在尝试找到最适合与我的React应用程序一起使用的表，而现在，react表提供了我需要的一切（分页，服务器端控件，过滤，排序，页脚行）。

话虽这么说，我似乎无法选择一行。没有任何例子可以证明这一点。

我尝试过的一些操作包括尝试在单击行时设置className。但是我似乎在enor中找不到调用元素t。另外，我不喜欢这种方法，因为这不是React应用程序应该做的事情。

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

这会将“名字”列设置为“选定”，但不会将类设置为“绿色”

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 }