如何折叠反应表中的其他展开行答案

【问题标题】：How to collapse other expanded rows in react-table如何折叠反应表中的其他展开行
【发布时间】：2017-11-06 15:21:44
【问题描述】：

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

谁能告诉我怎么做？

【问题讨论】：

【解决方案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 :)

【讨论】：

这里的关键是让父组件（实际渲染react-table的组件）来编排状态。 +1 指出 expand={this.state.expanded}。
如何在功能组件中做到这一点我看到扩展是只读的，任何解决方案都会有所帮助。谢谢

【解决方案2】：

Arnaud Enesvat 建议的方式适用于展开而不是折叠展开的行。

我建议对他的实施进行更改：

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

【讨论】：

【解决方案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
        })
    }}
/>

我希望它对某人有所帮助。

【讨论】：

【解决方案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 })
}}

【讨论】：

【解决方案5】：

好的，最后我自己想通了。通过动态更改 react-table 的“扩展”属性，我可以控制每次只显示一个扩展行。

【讨论】：

如何解决一次展开一行的问题？请与您的修复分享代码。
回答你自己的问题很好，但我认为你应该在这里发布一些代码来展示你所做的事情。
这里是代码示例 { return ; }} onExpandedChange={(newExpanded, index, event) => this.handleRowExpanded(newExpanded, index, event)} />

【解决方案6】：

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

【讨论】：

您能否添加一些关于如何和为什么的解释，您的代码 sn-p 提供了问题的答案？谢谢。
@deHaar 我用谷歌搜索了这个问题，我找到了这段代码，我在我的项目中使用了它，它有效，我分享，如果你是反应开发者，你正在寻找这个问题的解决方案，你会知道如何以及为什么，就是这样