Antd受控组件-以Table组件为例

//详细信息直接看以下代码中的注释内容。
//就是一个组件里面要告诉外面发生事件的时候要setState的属性
//外面要告诉里面组件的状态是看state里面的属性
//https://ant.design/components/table-cn/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import React, { Component } from 'react';  
import { Table, Button } from 'antd';
import './TableTest4.css';

const columns = [
    {
        title:'Name',
        dataIndex:'name',
    },
    {
        title:'Age',
        dataIndex:'age',
    },
    {
        title:'Address',
        dataIndex:'address',
    },
];

const data =[];
for(let i=0;i<46;++i){
    data.push({
        key:i,
        name:`特仑苏${i}`,
        age:32,
        address:`London,Park Lane no.${i}`,
    });
}

export default class TableTest4 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys:[],
            loading : false,
            //hasSelected : selectedRowKeys.length > 0,//React里面是不能state里面的状态互相联动的
            //一个组件里面是不能这么写的
        }
    }

    componentDidMount() {
    }

    start = () => {
        this.setState({loading:true});
        //ajax request
        setTimeout(()=>{
            this.setState(
                {
                    selectedRowKeys:[],
                    loading:false,
                }
            );
        }
        ,1000);

    }

    onSelectChange = (selectedRowKeys,selectedRows) =>{
        console.log('selectedRowKeys changed',selectedRowKeys);
        console.log('selectedRows',selectedRows);
        this.setState({selectedRowKeys})
    }

    render() {
        const hasSelected = this.state.selectedRowKeys.length>0;
        const rowSelection = {
            selectedRowKeys:this.state.selectedRowKeys,//外面告诉里面是看state的状态
            onChange:this.onSelectChange,//里面告诉外面变化的时候应该怎么触发事件
        }

        return (
            <div>
                <p>TableTest4</p>
                <div style={{marginBottom:16}}>
                    <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={this.loading}>
                        Reload
                    </Button>
                    <span style={{marginLeft:8}}>
                        {hasSelected?`Selected ${this.state.selectedRowKeys.length} items`:''}
                    </span>
                </div>                
                <Table rowSelection={rowSelection} columns={columns} dataSource={data}/>
            </div>                
        );
    }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注