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

目录
  • Antd中Form表单的onChange事件中执行setFieldsValue不生效
    • 原因是因为
    • 解决方案
  • antd Design Form 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 的使用我是在文档中的一个例子中找到的，碰到问题的时候还是要多阅读文档

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决antd 表单设置默认值initialValue后验证失效的问题

    方法一: getFieldDecorator没有第三个参数,如果写了3个参数就会出错 错误代码: <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='请输入用户名'/> ) } </Form.Item> 正确代码: <Form.Ite

  • 解决antd的Form组件setFieldsValue的警告问题

    记住:setFieldsValue的字段要对应得上 解决antd的Form组件setFieldsValue的警告 使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告,字面意义去看是说在 render之前设置了表单值的问题. 解决 在使用setFieldsValue给表单Form的某一个filed赋值时,可能掺杂了非表单控件

  • 在antd中setFieldsValue和defaultVal的用法

    代码如下: componentWillMount() { this.props.form.setFieldsValue({ phone: this.props.maintain.account.phone, email: this.props.maintain.account.email }); console.log(this.props.form.setFieldsValue); } 打印出来 function setFieldsValue(fieldsValue) { var newFie

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

    目录 Antd中Form表单的onChange事件中执行setFieldsValue不生效 原因是因为 解决方案 antd Design Form setFieldsValue的使用 解决 结束语 Antd中Form表单的onChange事件中执行setFieldsValue不生效 如果在Form表单中onChange事件中,手写了一个setFieldsValue, 则不会生效. 原因是因为 Form表单会在手写的onChange事件之后执行内部的setFieldsValue,所以会将我们之前手

  • react的ui库antd中form表单使用SelectTree反显问题及解决

    目录 react ui库antd中form表单使用SelectTree反显问题 最近遇到这个问题,后来找到原因 react antd form表单回显踩坑 需求如下 总结 react ui库antd中form表单使用SelectTree反显问题 最近遇到这个问题,后来找到原因 1.formItem 需要使用initialValue赋值. 2.这个组件需要一开始就存在不能是条件渲染,非要用条件渲染需要让它先显示,然后根据条件让它不显示. 例子: state={  treeList:[],  sho

  • 解决django中form表单设置action后无法回到原页面的问题

    django中form表单设置action后,点提交按钮是跳转到action页面的,比如设置action为login,网址为192.168.1.128,跳转后便会来到192.168.1.128/login,F5刷新也会是重新提交表单对话框,无法回到原页面. 因此就要在django服务器进行重定向,具体就是 from django.shortcuts import redirect #最后返回原页面 return redirect(url) 补充知识:Django + Ajax发送POST表单,并

  • 解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题

    一 问题 在公司的开发过程中,遇到了一个问题:如何处理 form 表单提交了多个 name 属性值相同的 input 标签?源码如下(源码是在 form 表单之中的): <!--{loop $address $index $one}--> <div class="address_item"> <p> <label> <input type="hidden" name="express_price&quo

  • php解决和避免form表单重复提交的几种方法

    前言 为什么要避免form表单被重复提交呢?因为我们不想让我们的服务器重复处理没必要的数据,同时我们也是避免我们的数据库产生重复的数据,避免表单重复提交也是让我们的网站更安全的一种表现. 先看一下有哪些情况下回导致表单重复提交呢,知道哪些情况下可能会出现表单重复提交就可以从根源处理表单重复提交的情况了. 下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 网页被恶

  • vue+elementui(对话框中form表单的reset问题)

    目录 对话框中form表单的reset问题 解决原理 解决办法 element UI form表单重置无效 实例化是 说下解决 对话框中form表单的reset问题 一般在新增和编辑的时候用的都是同一个对话框和form表单,而在先点击编辑的时候form表单的resetfileds函数就会失效 解决原理 实际上结构是(通过vue类比) data里面有一个form表单的初始值, methods里面定义了一个resetfileds的函数 resetfileds函数的作用:记录在mounted生命周期执

  • mvc中form表单提交的三种方式(推荐)

    第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit" value="搜索&

  • JavaScript中Form表单技术汇总(推荐)

    JavaScript中Form表单技术汇总(推荐)

    这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验证1-简单验证 进行简单的验证,用户名必须为abcd,密码长度必须大于等于6 然后根据用户输入的数据,在后面给出提示. 代码演示: <html> <head> <title>DHTML技术演示---表单验证</title> <meta http-equiv

  • 微信小程序中form 表单提交和取值实例详解

    微信小程序中form 表单提交和取值实例详解 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value; } 但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput.bindchange

  • vant组件表单外部的button触发form表单的submit事件问题

    目录 vant组件表单外部的button触发form表单的submit事件 一.给form表单添加ref属性 二.处理外部button vant点击表单中普通按钮为什么会触发表单提交 vant组件表单外部的button触发form表单的submit事件 有时候根据需求以及布局需要,button按钮需要放在form外部,但是想触发提交事件的同时又想方便地获取表单的值 一.给form表单添加ref属性 <van-form ref="formData" alidate-first @s

随机推荐