Antd日期选择器在某些情况下可能会出现意外行为,如在表单重置时日期选择器的值仍留存在输入框中等。为了解决这个问题,可以在表单提交或重置时手动清空日期选择器的值,具体方法如下:
import { useState } from 'react';
import { Form, DatePicker, Button } from 'antd';
function MyForm() {
const [form] = Form.useForm();
const [date, setDate] = useState(null); // 组件的状态值
const handleReset = () => {
form.resetFields();
setDate(null); // 手动清空组件状态值
};
const handleSubmit = (values) => {
console.log(values.date);
setDate(null); // 手动清空组件状态值
};
return (
);
}
在这个示例中,我们使用了一个useState钩子来存储日期选择器的状态值。在onReset和onFinish方法中,我们手动清空组件的状态值,以确保表单重置时不会出现意外行为。
下一篇:Antd日期选择器日期格式