我在我的项目中使用React Table,当用户单击一个展开的行时,我不知道如何关闭其他展开的行,即当第一行、第二行和第三行全部展开时,我想在用户单击时关闭所有这三行单击第四行。
有人可以告诉我怎么做吗?
对于任何寻找更多相关信息的人:
//在组件构造函数中,添加状态声明:
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}
});
}
哈:)
Arnaud Enesvat 建议的方式适用于扩展,但不能将扩展的行折叠回去。
我建议他的实施进行一些改变:
handleRowExpanded(rowsState, index) {
this.setState({
expanded: {
[index[0]]: !this.state.expanded[index[0]],
},
});
}
我在 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
})
}}
/>
我希望它对某人有帮助。
// 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 })
}}
任何人都可以解释一下如何使用功能组件在react-table中确保一次只扩展一行
好吧,最后我自己想出来了。通过动态更改反应表的“扩展”属性,我能够控制每次仅显示一个扩展行。
onExpandedChange = (expanded, index, event) => {
this.setState({ expanded: { [index]: expanded[index] !== false } })
}