reactjs - 如何折叠反应表中的其他展开行

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

我从 Spectrum.chat/thread/ea9b94dc-6291-4a61-99f7-69af4094e90c 获得了 Nathan Zylbersztejn 的帮助：

<ReactTable
    ...
    expanded={this.state.expanded}
    onExpandedChange={(newExpanded, index, event) => {
        if (newExpanded[index[0]] === false) {
            newExpanded = {}
        } else {
            Object.keys(newExpanded).map(k => {
                newExpanded[k] = parseInt(k) === index[0] ? {} : false
            })
        }
        this.setState({
            ...this.state,
            expanded: newExpanded
        })
    }}
/>

我希望它可以帮助某人。

Answer 4

// this line will go into constructor (keep every accordion closed initially)
this.state = {
  expanded: {}
}

// this line will go into react table (will keep only one accordian open at any time)
expanded={this.state.expanded}
onExpandedChange={expandedList => {
    const expanded = {}
    Object.keys(expandedList).forEach(item => {
        const expand = Boolean(expandedList[item] && expandedList[item].constructor === Object)
        expanded[item] = expand
    })
    this.setState({ expanded })
}}

Answer 5

好吧，最后我自己想通了。通过动态更改反应表的“扩展”道具，我能够控制每次只显示一个扩展行。

Answer 6

onExpandedChange = (expanded, index, event) => {
    this.setState({ expanded: { [index]: expanded[index] !== false } })
}