如何折叠react-table中的其他扩展行

Question

我在我的项目中使用React Table,当用户点击一个展开的时候,我不知道如何关闭其他展开的行,即当第一行,第二行和第三行全部展开时,我想在用户点击时关闭所有这三行第四排.

谁能告诉我怎么样？

Answer 1

对于任何寻找更多信息的人:

//在组件构造函数中,添加状态声明:

this.state = {
    expanded: {}
}

//在组件渲染功能中 - 将"扩展"设置为组件状态:

expanded={this.state.expanded}

//仍然在组件render()中 - 设置一个事件回调 - 我更喜欢使用名为handleRowExpanded的专用事件管理器:

onExpandedChange={(newExpanded, index, event) => this.handleRowExpanded(newExpanded, index, event)}

//然后声明一个事件管理器:

   handleRowExpanded(newExpanded, index, event) {
        this.setState({
        // we override newExpanded, keeping only current selected row expanded
            expanded: {[index]: true}
        });
    }

HTH :)

Answer 2

Arnaud Enesvat建议的方式可以扩展，但不能使扩展的行折回。

我建议更改一下他的实现：

handleRowExpanded(rowsState, index) {
  this.setState({
    expanded: {
      [index[0]]: !this.state.expanded[index[0]],
    },
  });
}

Answer 3

好吧，最后我自己解决了。通过动态更改反应表的“扩展”属性，我能够控制每次仅显示一个扩展行。