在单击反应表上选择行

Question

我正在尝试找到与我的 react 应用程序一起使用的最佳表格，现在， react-table 提供了我需要的一切（分页、服务器端控制、过滤、排序、页脚行）。

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

我尝试过的一些事情包括尝试在单击该行时设置一个类名。但我似乎无法在 e 或 t 中找到调用元素。另外，我不喜欢这种方法，因为它不是 react 应用程序应该做的事情。

 <ReactTable
            ...
            getTrProps={(state, rowInfo, column, instance) => {
                return {
                    onClick: (e, t) => {
                        t.srcElement.classList.add('active')
                    },
                    style: {
                    }
                }
            }}
        />

一些可能的解决方法是将复选框呈现为第一列，但这不是最佳选择，因为它限制了单击以“激活”该行的区域。此外，视觉反馈的表现力也会降低。

我想念房间里的大象吗？如果没有，你知道另一个支持我之前描述的东西的库吗？

谢谢！

编辑： 另一个选择，这是开源的，是建议编辑。也许这是正确的做法。

编辑 2

Davorin Ruš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”

原文由 gyosifov 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 }

原文由 Constantin Guidon 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/tannerlinsley/react-table/tree/v6#selecttable

这是一个工作示例：

https://codesandbox.io/s/react-table-select-j9jvw

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议