React setState同步更新state

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
import React, { Component } from 'react'
import { Wrapper } from './style';
import { Button, Modal, Form, Input, message, Select, InputNumber, Menu, Dropdown, Pagination,Checkbox,Popconfirm,Row,Col,DatePicker,Spin, Space, Radio} from 'antd';
import SearchBox, { SearchBoxItem } from '@c/searchBox';

const { Option } = Select;

class ChangeTheReportList extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            loading: false,
            current: 1,
            size: 10,
            tableData:[],
            total: 0,
            listingNumber: '',
            choiceContractor:"请选择",
            choiceContractorList:[],
        }
        this.formRef = React.createRef();
    }

    async getTableData() {
       
    }

    contractorInputOnchange(val) {
        this.setState({
            listingNumber: val.target.value&&val.target.value.replace(/s+/g,'')
        });
    }
    
    onSearch() {
        this.getTableData();
    }

    choiceContractorChange(val) {
        this.setState({
            choiceContractor: val,
        });
    }

    clearChoiceContractror(val) {
        this.setState({
            choiceContractor: "请选择",
        });
    }

    render() {
        const { loading, current, size, total, tableData , choiceContractor, choiceContractorList} = this.state;

        return (
            <Wrapper className="page-container">
                <Spin spinning={loading}>
                    <SearchBox ref={ref => this.formRef = ref} searchButton={<Button type="primary" onClick={() => this.onSearch()}>搜索</Button>} showOpen={false}>
                        <Row gutter={16}>
                            <Col style={{ width: '300px' }}>
                                <Form.Item name="contractorInput" label="分包清单搜索">
                                    <Input placeholder="请输入" onChange={this.contractorInputOnchange.bind(this)}/>
                                </Form.Item>
                            </Col>
                            <Col style={{ width: '300px'}} >
                                <Form.Item label="承包商选择：">
                                    <Select style={{ width: '100%'}} placeholder={choiceContractor} onChange={this.choiceContractorChange.bind(this)} allowClear onClear={this.clearChoiceContractror.bind(this)}>
                                        {choiceContractorList && choiceContractorList.map(d => (<Option value={d.contractorIdStr} >{d.contractorName}</Option>))}
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>
                    </SearchBox>
                </Spin>
            </Wrapper>
        )
    }
}

export default ChangeTheReportList;

1
2
3
4
5
6
7
8
clearChoiceContractror(val) {
    setTimeout(() => {
        this.setState({
            choiceContractor: "请选择",
        });
    }, 0);
}