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>