关于清空ant.design 中表单内容的方法

关于清空ant.design 中表单内容的方法

其实就两个方法具体怎么清除一个一个试试就知道了

表单有两个可能的属性：

• form
• formRef

可以用他们绑定两个用法在代码部分定义：

• form = useRef()
• form = Form.useForm()

清空的方法：

• form.current?.setFieldsValue({这里把你的值放进来并且赋值空字符串就好})
• form.setFieldsValue({这里把你的值放进来并且赋值空字符串就好})

使用实例：

import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormText,
} from '@ant-design/pro-components';
import {Button, Form, message, Tabs, theme} from 'antd';
import { useState } from 'react';
import {userRegisterUsingPost} from "@/services/yuapi/userController";
import { history } from '@umijs/max';


const Page = () => {
  const formRef = Form.useForm()
  const [loginType, setLoginType] = useState('register');
  const { token } = theme.useToken();
  const registerUser = async (values:API.UserRegisterRequest) => {
    const res = await userRegisterUsingPost({
      ...values
    })
    if(res.data){
      message.success("注册成功")
      history.push('/user/login')
    }else{
      message.error(res.message)
      formRef.current?.setFieldsValue({
        userAccount:"",
        userPassword:"",
        checkPassword:""
      })
    }
  }
  return (
    

      
              去看看
            
          ),
        }}
        actions={
          

          
        }
      >
        
          
        
        {loginType === 'register' && (
          <>
            
                ),
              }}
              placeholder={'请输入用户名'}
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            
                ),
              }}
              placeholder={'请输入密码'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
            
                ),
              }}
              placeholder={'请确认输入密码'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
          
        )}
        

          
            去登陆
          
        
      
    
  );
};

export default () => {
  return (
    
      
    
  );
};

第二个实例：

import React, {useEffect, useRef, useState} from 'react';
import {Button, Checkbox, Form, FormInstance, Input, message} from 'antd';
import {updateInterfaceInfoUsingPost} from "@/services/yuapi/interfaceInfoController";
import {ProForm} from "@ant-design/pro-form";
import useForm = ProForm.useForm;


export type Props = {
  handleUpdateModalOpen?:any;
  actionRef?:any;
  record: API.InterfaceInfo;
}

const UpdateFrom: React.FC = (props) => {
  useEffect(
    ()=>{
      formRef.setFieldsValue(props.record);
    }
    , [props.record]
  )
  const [data,setData] = useState(props.record);
  const [formRef] = Form.useForm()
  const onFinish = async (values: any) => {
    values = {
      ...values,
      id : props.record?.id
    }
    const res = await updateInterfaceInfoUsingPost(values);
    if(res.code == 0){
      props.handleUpdateModalOpen(false);
      message.success("修改成功");
      props.actionRef.current.reload();
    }else{
      message.error(res.message);
    }
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    

      
        
接口更新
      
      
        
      

      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      


      
        
          Submit
        
      
    
  );
}
export default UpdateFrom;