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

Question

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

有人可以告诉我怎么做吗？

Answer 1

对于任何寻找更多相关信息的人：

//在组件构造函数中，添加状态声明：

this.state = {
    expanded: {}
}

//在组件渲染函数中 - 将“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}
        });
    }

哈:)

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

任何人都可以解释一下如何使用功能组件在react-table中确保一次只扩展一行

Answer 6

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

Answer 7

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