antd resetFields方法的用法和示例

antd resetFields方法

antd resetFields方法是antd中的一种清空表单的方法，可以将表单中的所有字段重置为初始值。使用resetFields方法可以在表单提交后，将表单中的所有字段重置为初始值，以便用户重新输入值。

使用方法

使用resetFields方法需要先引入Form对象：

import { Form } from 'antd';

在Form组件中添加resetFields方法：

  //...
  
     form.resetFields()}>
      重置
    
  

resetFields方法可以接受一个参数，表示要重置的字段：

form.resetFields(['name', 'age']);

如果不传参数，则会重置所有字段。

示例

以下是一个使用resetFields方法重置表单的示例：

import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';

const Example = () => {
  const [form] = Form.useForm();
  const [formData, setFormData] = useState({
    name: '',
    age: ''
  });

  const handleSubmit = e => {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        setFormData(values);
        form.resetFields();
      }
    });
  };

  return (
    

      
        
      
      
        
      
      
        
          提交
        
         form.resetFields()}>
          重置
        
      
      

        
Name: {formData.name}
        
Age: {formData.age}
      
    
  );
};

export default Example;

在该示例中，当用户点击提交按钮时，表单中的值会被保存到formData变量中，调用resetFields方法重置表单。