在Antd中,表单组件的初始值是通过设置initialValues
属性来实现的。当状态发生变化后,如果想要表单的初始值也随之更新,可以使用setFieldsValue
方法来手动更新表单的值。
以下是一个示例代码,演示了如何在状态更改后更新Antd表单的初始值:
import React, { useState } from "react";
import { Form, Input, Button } from "antd";
const MyForm = () => {
const [form] = Form.useForm();
const [name, setName] = useState("");
const initialValues = {
name: name
};
const handleNameChange = (e) => {
setName(e.target.value);
form.setFieldsValue({ name: e.target.value }); // 手动更新表单的初始值
};
const handleSubmit = (values) => {
console.log("Form submitted:", values);
};
return (
);
};
export default MyForm;
在上述代码中,我们使用useState
来定义一个名为name
的状态。然后,在handleNameChange
函数中,我们更新了该状态,并通过form.setFieldsValue
方法手动更新了表单的初始值。这样,无论name
状态如何更改,表单的初始值都会随之更新。
这是一个简单的解决方法,可以确保表单的初始值在状态更改后得到更新。