Чтобы очистить входные значения в форме Ant Design после отправки, вы можете использовать следующие методы:
- Управляемые компоненты. В этом подходе вы можете использовать переменные состояния для хранения значений формы и сбрасывать их до пустых значений после отправки. Это гарантирует очистку полей ввода. Вот пример:
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;
- Ссылки: используя ссылки, вы можете напрямую обращаться к элементам формы и сбрасывать их значения. Вот пример:
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;