Очистка входных значений в форме Ant Design при отправке: несколько методов

Чтобы очистить входные значения в форме Ant Design после отправки, вы можете использовать следующие методы:

  1. Управляемые компоненты. В этом подходе вы можете использовать переменные состояния для хранения значений формы и сбрасывать их до пустых значений после отправки. Это гарантирует очистку полей ввода. Вот пример:
import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
const MyForm = () => {
  const [formValues, setFormValues] = useState({});
  const handleSubmit = (values) => {
    // Handle form submission logic
    // Reset form values
    setFormValues({});
  };
  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name="field1">
        <Input value={formValues.field1} onChange={(e) => setFormValues({ ...formValues, field1: e.target.value })} />
      </Form.Item>
      {/* Add more Form.Item components for other fields */}
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};
export default MyForm;
  1. Ссылки: используя ссылки, вы можете напрямую обращаться к элементам формы и сбрасывать их значения. Вот пример:
import React, { useRef } from 'react';
import { Form, Input, Button } from 'antd';
const MyForm = () => {
  const formRef = useRef();
  const handleSubmit = () => {
    // Handle form submission logic
    // Reset form values
    formRef.current.resetFields();
  };
  return (
    <Form ref={formRef} onFinish={handleSubmit}>
      <Form.Item name="field1">
        <Input />
      </Form.Item>
      {/* Add more Form.Item components for other fields */}
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};
export default MyForm;