反应和扩展行渲染-一次仅打开一行 [英] React antd expandedRowRender - Only open one row at a time

问题描述

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

是否有蚂蚁设计的解决方案，允许expandedRowRender函数一次仅用于一行。

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

推荐答案

这很容易做到。您需要利用<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);
}

这篇关于反应和扩展行渲染-一次仅打开一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！