react.js - react antd 如何删除数组中指定的元素？

问题描述

问 题

我想删除数组中的指定元素。
虽然我知道splice方法，但是要使用这个方法需要些另外的代码来遍历出我想要删除的数据所在数组的位置，因此太过于麻烦。
有没有方法可以实现？ES6环境。
谢谢

解决方案

用splice的方法，一般是把你的数据放在state上，table会使用state上的值来渲染，示例如下：

this.state = {
    selectedRowKeys: [],
    data: [{
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    }, {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    }]
}

delete方法：

const selectedRowKeys = this.state.selectedRowKeys;
let dataSource = this.state.data;
for(let i = selectedRowKeys.length - 1; i >= 0; i--) {
    dataSource.splice(Number.parseInt(selectedRowKeys[i] - 1), 1);
}
this.setState({
    data: dataSource,
    selectedRowKeys: []
})

render函数：

render () {
    const { loading, selectedRowKeys, data } = this.state;

    const rowSelection = {
        type: 'checkbox',
        selectedRowKeys: selectedRowKeys,
        onChange: this.onSelectChange.bind(this)
    };
    const hasSelected = selectedRowKeys.length > 0;

    return (
        <div>
            <div style={{ marginBottom: 16 }}>
                <Button type="danger" onClick={this.delete.bind(this)}
                    disabled={!hasSelected} loading={ loading } >
                    删除
                </Button>
                <span style={{ marginLeft: 8 }}>{ hasSelected ? `选择了 ${selectedRowKeys.length} 条数据` : ''}</span>
            </div>
            <Table rowSelection={ rowSelection } columns={columns} dataSource={data} />
        </div>
   )
}

这篇关于react.js - react antd 如何删除数组中指定的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！