reactjs - ReactJS：更新填写的表格并在取消后返回初始状态

Question

我目前想知道取消后如何返回表单的初始状态。

这是场景：

1. 我有一个需要更新的用户信息表。
2. 在表单中，我已经可以看到我的数据。
3. 我更改了其中一个字段的值。
4. 更改值后，我意识到我不想更新它，所以我单击取消。

当我单击取消时，它应该返回到原始数据。

我目前的情况是，当我点击取消时，我正在使用 resetFields(); 清除所有输入字段的功能。

const cancel = () => {
     form.resetFields()
    }

有什么建议吗？

标签： reactjsformsreact-hooksantd

Answer 1

您需要保存初始状态，在取消时不.resetFields()使用但用于.setFields({})重置。

阅读有关表单实例的文档

这里的例子：

form.setFields({ ...state })

初始状态以这种格式保存：

{
   firstInput: {
     value: 'value', errors: []
   },
   secondInput: {
     value: 'value', errors: []
   }
}