选择click react-table上的行

Question

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

话虽如此,我似乎无法选择一行.没有举例说明这一点.

我尝试过的一些事情包括尝试在点击行时设置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后,您可以使用必要的方法使用它:

/**
* Toggle a single checkbox for select table
*/
toggleSelection(key: number, shift: string, row: string) {
    // start off with the existing state
    let selection = [...this.state.selection];
    const keyIndex = selection.indexOf(key);

    // check to see if the key exists
    if (keyIndex >= 0) {
        // it does exist so we will remove it using destructing
        selection = [
            ...selection.slice(0, keyIndex),
            ...selection.slice(keyIndex + 1)
        ];
    } else {
        // it does not exist so add it
        selection.push(key);
    }
    // update the state
    this.setState({ selection });
}

/**
* Toggle all checkboxes for select table
*/
toggleAll() {
    const selectAll = !this.state.selectAll;
    const selection = [];

    if (selectAll) {
        // we need to get at the internals of ReactTable
        const wrappedInstance = this.checkboxTable.getWrappedInstance();
        // the 'sortedData' property contains the currently accessible records based on the filter and sort
        const currentRecords = wrappedInstance.getResolvedState().sortedData;
        // we just push all the IDs onto the selection array
        currentRecords.forEach(item => {
            selection.push(item._original._id);
        });
    }
    this.setState({ selectAll, selection });
}

/**
* Whether or not a row is selected for select table
*/
isSelected(key: number) {
    return this.state.selection.includes(key);
}

<CheckboxTable
    ref={r => (this.checkboxTable = r)}
    toggleSelection={this.toggleSelection}
    selectAll={this.state.selectAll}
    toggleAll={this.toggleAll}
    selectType="checkbox"
    isSelected={this.isSelected}
    data={data}
    columns={columns}
/>

有关更多信息,请参见此处:https :
//github.com/react-tools/react-table/tree/master/src/hoc#selecttable

这是一个工作示例:https :
//react-table.js.org/#/story/select-table-hoc