当前位置: 代码迷 >> 综合 >> 使用antd的Form组件在hubmit事件外的其他事件中获取Form表单中input的值
  详细解决方案

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

热度:87   发布时间:2023-10-27 13:35:04.0

今天写一个表单组件时遇见一个小问题,以前一般都是在蚂蚁金服的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.usernamelet username= getFieldValue('username') === undefined?'':getFieldValue('username')//对数据有无进行判断取值

 

  相关解决方案