解决Antd中Form表单的onChange事件中执行setFieldsValue不生效

 更新时间:2023年03月11日 14:47:03   作者:spicyboiledfish  
这篇文章主要介绍了解决Antd中Form表单的onChange事件中执行setFieldsValue不生效问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Antd中Form表单的onChange事件中执行setFieldsValue不生效

如果在Form表单中onChange事件中,手写了一个setFieldsValue, 则不会生效。

原因是因为

Form表单会在手写的onChange事件之后执行内部的setFieldsValue,所以会将我们之前手写的setFieldsValue给覆盖掉。

解决方案

1. 使用setTimeout延时。此方案不推荐

2. 使用getValueFromEvent. 是当onChange的时候,更改form表单的值的情景下使用

<FormItem label="路由节点" {...nodelayout}>
     {getFieldDecorator(`node`, {
        rules: [
           {
              required: true,
              message: '选择要指定的路由节点',
            }],
        getValueFromEvent: (val: any) => {
            let nodesArr = [] as any;
             for (let item of transferList) {
                 for (let j of val) {
                    if ((item as any).id === j) {
                      nodesArr.push(item);
                    }
                  }
             }
             return nodesArr;
        }
     })(
    <Transfer
       operations={['>>', '<<']}
       dataSource={transferList}
       filterOption={(inputValue: any, option: any) =>
          option.value.indexOf(inputValue) > -1
       }
       showSearch
       lazy={false}
       targetKeys={targetKeys}
       onChange={transferHandleChange}
       onSearch={transferHandleSearch}
       render={item => item.value}
    />,
)}
</FormItem>

3. 如果你只想简单的更改表单的值setFieldsValue,而不是在onChange的时候触发。那么可以使用normalize. 与上述的getValueFromEvent类似,都是option的一个属性。

antd Design Form setFieldsValue的使用

最近项目使用的是antd Design 4.x 版本,碰到个需要加载后端数据并展示,并且用户可以进行修改的需求,前端采用的是antd的Form表单来实现

组件加载的时候向后端请求数据

componentDidMount() {
        gainCountry().then(res => {
            // 这里进行数据请求
            ......
        })
    }

form表单要回填数据一般会想到的是initialValues,但是这是适用于初始化值的时候,官方文档的原话:“initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新”。

搜索一番setFieldsValue的使用,基本上都是:this.props.form.setFieldsValue, props自带form,试用之后发现报错,this.props下没有form,这个好像只适用于antd 3.x

解决

antd4.x 中使用setFieldsValue 是通过ref来进行操作,如下所示:

class Index extends Component{
    constructor(props) {
        super(props)
        this.state = { }
    }
    // 创建一个ref
    formRef = React.createRef()
    render(){
        return{
             {/* 绑定到Form身上*/}
             <Form ref={this.formRef}>
                <Form.Item name="example">
                   <Input />
                </Form.Item>
             </Form>
        }
    }
}
export default BaseInfo

在需要的地方进行使用:

// example 为Form.Item中的name
this.formRef.current.setFieldsValue({
       example: ‘从后台返回要显示的值',
                
})

结束语

官方文档中都是有相关说明的,setFieldsValue 的使用我是在文档中的一个例子中找到的,碰到问题的时候还是要多阅读文档

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue加载动画element ui V-loading属性的踩坑记录

    vue加载动画element ui V-loading属性的踩坑记录

    这篇文章主要介绍了vue加载动画element ui V-loading属性方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 用Vue编写抽象组件的方法

    用Vue编写抽象组件的方法

    这篇文章主要介绍了用Vue编写抽象组件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 实现一个 Vue 吸顶锚点组件方法

    实现一个 Vue 吸顶锚点组件方法

    这篇文章主要介绍了实现一个 Vue 吸顶锚点组件方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Vue移动端右滑屏幕返回上一页附源码下载

    Vue移动端右滑屏幕返回上一页附源码下载

    这篇文章主要介绍了Vue移动端右滑屏幕返回上一页,本文结合实例给大家介绍的非常详细,并附有源码下载,需要的朋友可以参考下
    2019-06-06
  • vue配置nprogress实现页面顶部进度条

    vue配置nprogress实现页面顶部进度条

    这篇文章主要为大家详细介绍了vue配置nprogress实现页面顶部进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Vue使用echarts可视化组件的方法

    Vue使用echarts可视化组件的方法

    这篇文章主要介绍了Vue使用echarts可视化组件的方法,本文通过实例代码案例给大家详细介绍,需要的朋友可以参考下
    2021-07-07
  • 详解Vue中如何进行分布式日志管理与日志分析

    详解Vue中如何进行分布式日志管理与日志分析

    在现代应用程序中,日志是一项重要的功能,用于帮助开发人员和运维人员了解应用程序的行为并进行故障排除,本文将介绍如何在Vue应用程序中实现分布式日志管理和日志分析功能,感兴趣的可以了解一下
    2023-06-06
  • 深入详解Vue3 ref底层实现原理

    深入详解Vue3 ref底层实现原理

    随着现在vue3越来越普及,相应的面试题也多了起来。说到vue3的面试题,有一个最经典的就是对于实现ref和reactive这两个方法的底层原理,本文就来和大家简单讲讲吧
    2023-04-04
  • vue3使用mqtt的示例代码

    vue3使用mqtt的示例代码

    这篇文章主要介绍了vue3使用mqtt的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue数据变化监听错误的常见原因与解决方案

    Vue数据变化监听错误的常见原因与解决方案

    在 Vue.js 开发中,watch 是一个强大的工具,用于监听数据的变化并执行相应的操作,然而,许多开发者在使用 watch 时会遇到数据变化未被正确监听的问题,这可能导致程序逻辑错误或视图更新失败,本文将探讨这些问题的常见原因,并提供相应的解决方案,需要的朋友可以参考下
    2025-03-03

最新评论