react set值会导致表单重置而清空数据

当在表单中输入姓名并尝试将其添加到关联对象的下拉列表时,设置值会导致表单清空。为了解决这个问题,可以使用异步方法,在设置关联列表后,通过延时调用来恢复表单的数据。文章提供了一个示例代码片段,展示了如何在React中处理这个问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值