React antd expandRowRender - 一次只打开一行

Question

我创建了一个反应表并使用ant design。

有没有一种蚂蚁设计的解决方案，允许expandedRowRender 函数一次只用于一行。

如果展开一行，我想隐藏所有其他展开图标。

Answer 1

这很简单。您将需要利用<Table /> 组件的expandedRowKeys 属性。该属性存储当前展开的行键的值。所以，我们要做的就是只设置当前展开的行键并删除其他的。

render()

<Table
    expandedRowKeys={this.state.expandedRowKeys}
    onExpand={this.onTableRowExpand}
/>

onExpand回调

onTableRowExpand(expanded, record){
    var keys = [];
    if(expanded){
        keys.push(record.id); // I have set my record.id as row key. Check the documentation for more details.
    }

    this.setState({expandedRowKeys: keys});
}

更多阅读： <Table /> API Documentation

2021 年更新

如果你使用钩子

// useState()
const [expandedRowKeys, setExpandedRowKeys] = useState([]);

render()

<Table
    expandedRowKeys={expandedRowKeys}
    onExpand={onTableRowExpand}
/>

onExpand回调

const onTableRowExpand = (expanded, record) => {
    const keys = [];
    if(expanded){
        keys.push(record.id); // I have set my record.id as row key. Check the documentation for more details.
    }

    setExpandedRowKeys(keys);
}