antd中的setFieldsValue

最新推荐文章于 2024-05-30 21:04:01 发布

FØund404

最新推荐文章于 2024-05-30 21:04:01 发布

阅读量3.9k

点赞数 2

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/bl_ack233/article/details/126444736

版权

title: antd中的setFieldsValue
date: 2022-08-20 21:09:08
tags: # 标签

antd
React

categories: # 分类

React
UI组件库

关于antd中的setFieldsValue

起因：

在做后台管理的用户列表页面时，想要制作一个点击编辑用户信息可以弹出一个拟态框，拟态框可以动态获取到用户的name和password值。同时，将获取到的值传递进input中。

我原本的思路是先设置一个默认值，当点击编辑渲染拟态框组件的时候会触发useEffect组件挂载完毕的勾子，这时候就会触发setusername这个回调，将数据更改，从而将input中的值也更改。

当然，组件间传递数据是可以实现的

// 使用消息订阅与发布
import PubSub from 'pubsub-js'
...

// 点击编辑按钮弹出拟态框并将数据发给拟态框组件
const edit = (record)=>{
    // 使用消息订阅与发布将数据传送给拟态框
    PubSub.publish('inputValue',record)
    // 开启拟态框
    setVisible(true)
}

接收数据：

  useEffect(()=>{
    let token = PubSub.subscribe('inputValue',(_,data)=>{
      let {username,password} = data;
      // 此时拟态框获取到了对应点击那行用户的数据
    })
    return ()=>{
      PubSub.unsubscribe(token);// 清除消息订阅
    }
  },[]);

起初想使用useState改变状态，但是不彳亍😥，看了文档发现不支持，可以使用form.setFieldsValue({})

但是我实在不知道这里面的对象到底该怎么传！！

要知道，input有两个，该如何区分，如何赋值，官网也不详细。后来看了一个demo才发现，原来每个<From.Item>上都有一个name值，这就是区分不同input的关键！

...
<Form.Item 
    name="password" 
    label="密码"
    initialValue="admin" //这是默认值
    >
  <Input type="textarea"/>
</Form.Item>
...

解决方案：

...

  useEffect(()=>{
    let token = PubSub.subscribe('inputValue',(_,data)=>{

      let {username,password} = data;
      // 修改默认值
      form.setFieldsValue({
        username:username, // 对应第一个input
        password:password  // 对应第二个input
      })
        
    })
    return ()=>{
      PubSub.unsubscribe(token); //清除消息订阅
    }
  },[]);

...

此时不管点哪行用户的编辑，都可以实时更改input中的值：😍😍