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

最新推荐文章于 2025-05-07 18:51:08 发布

Do vis~

最新推荐文章于 2025-05-07 18:51:08 发布

阅读量411

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/gittt/article/details/129379018

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