1.需求与问题
当输入完姓名的时候,需要把输入的姓名添加到关联对象的下拉框中供用户选择。但是输入姓名后,将值set到关联对象后,表单直接就清空了。
2.解决
在set后会自动清空表单,所有我们可以通过异步来恢复表单数据
const [associationList, setAssociationList] = useState([]) //关联对象
// 输入框失去焦点
const changeName = (e) => {
let val = e.target.value
let obj = JSON.parse(JSON.stringify(form.getFieldValue()))
// 如果关联对象存在用户名了,或者输入为空,就不需要添加了
if(associationList.filter(item=>item.personAssociatedObjects ==val).length>0 || !val){
return false
}
let arr = JSON.parse(JSON.stringify(associationList))
arr.unshift({
person: val,
})
// set后表单会重置数据清空
setAssociationList(arr)
// 通过延时来恢复清空了的表单
setTimeout(() => {
form.setFieldsValue({
personName: obj.personName,
})
}, 0)
}
<Form.Item name="personName" label="姓名:">
<Input onBlur={(val) => { changeName(val)}}/>
</Form.Item>
<Form.Item name="personObj" label="关联对象:">
<Select>
{associationList.map((item: any, index) => {
return (
<option key={index} value={item.person}
)
})}
</Select>
</Form.Item>