使用antd的react项目中查询条件重置功能的实现

                <div className='headDiv'>
                    <h4>任务日期:</h4>
                    <RangePicker onChange={this.dateOnChange} value={this.state.date} />
                </div>
                <div className='headDiv'>
                    <h4>任务状态:</h4>
                    <Select
                        style={{ width: 200 }}
                        placeholder="请选择"
                        onSelect={this.onSelectTaskStatus}
                        value={this.state.taskStatus}
                    >
                        {taskStatusData.map((item, index) =>
                            <Option value={item.key}>{item.value}</Option>
                        )}
                    </Select>
                </div>

在vue中,只需要v-model就可以双向绑定.在react则需要给标签绑定value值,然后在reset方法里情况所绑定的值,如下:

   reset = () => {
        this.setState({
            date: [],
            startDate: '',
            endDate: '',
            taskStatus: "",
        }, () => {
            this.initPage()
        })
    }

以下为onchange事件

    /**
     * 日期选中触发
     */
    dateOnChange = (date, dateString) => {      
        this.setState({
            date,
            startDate: dateString[0],
            endDate: dateString[1],
        })     
    }
    /**
     * 任务状态-选中触发
     */
    onSelectTaskStatus = (value) => {
        this.setState({
            taskStatus: value
        })
    }