antd form表单联动,清空上一次的value值

antd form表单select、input联动发现页面value值还是显示的上一次的

举个栗子,根据员工职位联动员工姓名和工号

如果select是一个多选框,那么赋值的时候需要给一个空数组

//根据职位查询员工名字
wokerChange(value) {
    const self = this
    api.post(APIS.commonEmployeeFilter + '1/200', {
        data: { posCode: value || '' }
    }).then(function (response) {
        let workerNameList = response.data.data.records
        this.setState({
            workerNameList
        })
    });
}
// 提供了一个在select里面添加公用Option内容的方法  
//第一个参数为原数据(array) 
//第二个为value----值为当前输入框内容对应的id或code唯一标识(不能为number会报错)  
//第三个为内容
	const renderOption = (arr , code , name) => arr ?  arr.map( (item,index)=>{
		return (<Option key={index+item[code]} value={ typeof(item[code]) === 'number' ? item[code].toString() : item[code]}>{item[name]}</Option>)
		  }) : null
		  
		<Select mode="tags" >{renderOption(giftScope,'id','name')}</Select>
<FormItem label="员工职位"  {...formItemLayout} hasFeedback>
    {getFieldDecorator('positionCode', {
        rules: [{ required: true, message: reqMeg }]
    })(<Select
        placeholder="请选择"
        size="default"
        allowClear={true}
        showSearch
        filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        onChange={(value) => {
            self.wokerChange(value)
            //把上一次的value值赋空,不然第二次onChange的时候还是显示的第一次的value值
            let obj = {};
            obj['workerName'] = '';
            obj['workNumber'] = '';
            this.props.form.setFieldsValue(obj);
        }}>
        {renderOption(positionNameList, 'code', 'name')}
    </Select>)}
</FormItem>

    <FormItem label="员工姓名"  {...formItemLayout} hasFeedback>
        {getFieldDecorator('workerName', {
            rules: [{ required: true, message: reqMeg }]
        })(<Select
            placeholder="请选择"
            size="default"
            allowClear={true}
            showSearch
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            onChange={(value) => {
            //value就为绑定的workerName,renderOption第二个参数
                let obj = {}
                obj['workNumber'] = value
                this.props.form.setFieldsValue(obj)
            }}>
            {renderOption(workerNameList, 'workNumber', 'name')}
        </Select>)}
    </FormItem>
    <FormItem label="员工工号"  {...formItemLayout} hasFeedback>
        {getFieldDecorator('workNumber', {
            rules: [{ required: true, message: reqMeg }]
        })(<Input
            placeholder="请选择"
        >
        </Input>)}
    </FormItem>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值