使用antd的Form组件在hubmit事件外的其他事件中获取Form表单中input的值

最新推荐文章于 2024-07-12 17:41:32 发布

vuvivian

最新推荐文章于 2024-07-12 17:41:32 发布

阅读量5.6k

点赞数 1

分类专栏： React 文章标签：表单数据 antd

本文链接：https://blog.csdn.net/vuvivian/article/details/78808534

版权

React 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

今天写一个表单组件时遇见一个小问题，以前一般都是在蚂蚁金服的Form组件的提交事件中直接对values进行操作及调用接口，将数据传给后台；而今天是想在Form提交事件中不提交数据而是调用queryData()事件，然后在queryData()事件中对数据进行操作，如下：

 handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.queryData();
            }
        });
    }

这时问题就来了，怎么在queryData()事件中获取表单中的values并进行数据对接呢？这时用到了

const {getFieldValue} = this.props.form;

这样就获取到了表单中所有的values，接下来你就可以取到你想要的表单中的任意数据并进行任意操作了，如下：

 let username= getFieldValue('username')；//获取到values.username

let username= getFieldValue('username') === undefined?'':getFieldValue('username')//对数据有无进行判断取值