antd 的 form resetFields

关于antd中 react 的 form 表单的赋值和重置的问题
如果你的表单后续需要重置,那么在给表单赋值的时候,需要用

import {getDetail} form './sever'
const [form] = Form.useForm();  // Your form
....
// get your api informations
 const { data: res } = await getDetail(Id);

//set form, don't  use setState to set your  information
 form.setFieldsValue(res?.data);   // res?.data是链式写法,效果等同于 res && res.data
.....


// when you want to reset your form,use this sentences
form.resetFields()
//over--

...
return (
<>
   {
          form.validateFields().then((values) => {
              onSaveFinish(values);
            }) .catch((info) => {
              console.log('Validate Failed:', info);
            });
        }}
   >
    
.... // your form content
)

以上说明:表单在赋值时不要用 setState 给表单赋 initValues, 这样很可能会使表单的值无法清空,下面是错误的使用方式

// 以下是错误使用方式
  const [initialValues, setInitialValues] = useState({});

// get your api informations
 const { data: res } = await getDetail(id);
 setInitialValues(res?.data)


.....
 
.... // your form content

你可能感兴趣的:(antd 的 form resetFields)