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

好的，我最终自己想通了。通过动态更改＆＃34;扩展＆＃34;反应表的道具，我能够控制每次只展示一个展开的行。

Answer 5

// 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 6

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

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

6 个答案: