antd-design组件库input和select组件如何优雅的给状态赋值

antd-design组件库input和select组件如何优雅的给状态赋值

react项目使用antd-design组件库，Input及select组件优雅赋值

前言

react项目使用antd-design组件库，Input及select组件优雅赋值。
对于冗余的代码，我们要有一个匠人的精神~~~

一、引入组件

import { message, Icon, Input, Select, Button, Checkbox, Table, Tag, Divider, Pagination } from 'antd';
import { talentTable } from '../../api'
import './index.less'
const { Option } = Select;

二、使用组件

<div className="framework-body-main cf credittalent-body">
                    <div className="key-input input-base">
                        <p className="input-title">关键词</p>
                        <Input placeholder="" onChange={(e)=> {this.inputChange(e,'keyWord')}} />
                    </div>
                    <div className="position-input input-base">
                        <p className="input-title">职位</p>
                        <Input placeholder="" onChange={(e)=> {this.inputChange(e,'position')}} />
                    </div>
                    <div className="company-input input-base">
                        <p className="input-title">公司名称</p>
                        <Input placeholder="" onChange={(e)=> {this.inputChange(e,'companyName')}} />
                    </div>
                    <div className="school-input input-base">
                        <p className="input-title">学校名称</p>
                        <Input placeholder="" onChange={(e)=> {this.inputChange(e,'schoolName')}} />
                    </div>
                    <div className="education-input input-base">
                        <p className="input-title">学历</p>
                        <Select placeholder="请选择" style={{ width: 200 }} onChange={(value)=> {this.inputChange(value,'education')}}>
                            <Option value="博士">博士</Option>
                            <Option value="硕士">硕士</Option>
                            <Option value="本科">本科</Option>
                            <Option value="专科">专科</Option>
                            <Option value="其他">其他</Option>
                        </Select>
                    </div>
                    <div className="job-input input-base">
                        <p className="input-title">工作年限</p>
                        <div className="select-container">
                            <Select placeholder="请选择" style={{ width: 120 }} onChange={(value)=> {this.inputChange(value,'workingStart')}}>
                                <Option value= {0}>不限</Option>
                                <Option value= {0}>无经验</Option>
                                <Option value= {1}>1年</Option>
                                <Option value= {2}>2年</Option>
                                <Option value= {3}>3年</Option>
                                <Option value= {4}>4年</Option>
                                <Option value= {5}>5年</Option>
                                <Option value= {6}>6年</Option>
                                <Option value= {7}>7年</Option>
                                <Option value= {8}>8年</Option>
                                <Option value= {9}>9年</Option>
                                <Option value= {10}>10年及以上</Option>
                            </Select>
                            <div className="select-line">-</div>
                            <Select placeholder="请选择" style={{ width: 120 }} onChange={(value)=> {this.inputChange(value,'workingEnd')}}>
                                <Option value= {100}>不限</Option>
                                <Option value= {0}>无经验</Option>
                                <Option value= {1}>1年</Option>
                                <Option value= {2}>2年</Option>
                                <Option value= {3}>3年</Option>
                                <Option value= {4}>4年</Option>
                                <Option value= {5}>5年</Option>
                                <Option value= {6}>6年</Option>
                                <Option value= {7}>7年</Option>
                                <Option value= {8}>8年</Option>
                                <Option value= {9}>9年</Option>
                                <Option value= {10}>10年及以上</Option>
                            </Select>
                        </div>
                    </div>

                    <div className="btn-position">
                        <Button type="primary"  onClick={(e) => { this.queryTalent(e) }}>查 询</Button>
                    </div>
                </div>

三、状态值设置

constructor(props) {
        super(props)
        this.state = {
            keyWord:'',
            position:'',
            companyName:'',
            schoolName:'',
            education:'',
            workingStart:'',
            workingEnd:'', // 条件查询对象
        }
    }

四、事件监听(重点要来了)

一般处理

    inputChange(e,flag) {
        // if (flag == 'keywords') {
        //     this.setState({
        //         keywords:e.target.value
        //     })
        // }
        // if (flag == 'position') {
        //     this.setState({
        //         position:e.target.value
        //     })
        // }
        // if (flag == 'company') {
        //     this.setState({
        //         company:e.target.value
        //     })
        // }
        // if (flag == 'shool') {
        //     this.setState({
        //         shool:e.target.value
        //     })
        // }
        // if (flag == 'education') {
        //     this.setState({
        //         education:e
        //     })
        // }
        // if (flag == 'jobstart') {
        //     this.setState({
        //         jobstart:e
        //     })
        // }
        // if (flag == 'jobend') {
        //     this.setState({
        //         jobend:e
        //     })
        // }
    } 

***优化处理

    inputChange(e,flag) {
        if (flag !='education' && (flag !='workingStart') && flag !='workingEnd') {
            this.setState({
                [flag]:e.target.value
            })
        } else {
            this.setState({
                [flag]:e
            })
        }
    } 

总结

善于思考，复盘，总结，优化，