应用场景
class声明的组件中使用resetFields来让表单重置,在这之前如果通过Form.useForm对表单数据域进行交互,报以下错误:
当我使用到函数组件时,我可以通过一下去定义state值,我们可以通过Form.useForm对表单数据域进行交互,如:setFieldsValue()、getFieldValue()、validateFields()、resetFields()等。
// [变量,操作方法] = React Hooks(值)
const [visible, setVisible] = React.useState(false);
const [confirmLoading,setConfirmLoading]=React.useState(false);
const [form] = Form.useForm();
然后快速设置值
setVisible(true);
setVisible(false);
解决
问题:==但是不可以在class声明的组件中去使用,useState,useForm是React Hooks的实现,只能用于函数组件。==如果我需要在class声明的组建中去使用该如何?
解决:在 Class 组件 下,需要通过 ref 获取数据域,通过ref获取的控制实例可使用API-FormInstance提供的所有方法,formRef = React.createRef();
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { Form } from 'antd';
class LoginForm extends Component {
formRef = React.createRef()
changeCode = () => {
// 此处可用
this.formRef.current.resetFields();
}
render() {
return (
<Form ref={this.formRef} ></Form>
)
}
}
export default withRouter(LoginForm);