将FormIk重置值转换为空值handleReset函数

Question

我有一个带有默认值的表格。

我想要一个按钮来将所有表单值重置为空值。

内置的handleReset函数仅将值重置为表单加载时的默认值。 我试图用与下面的代码类似的概念来更改默认值的道具，但是这些道具是“只读的”。

resetToEmpty(){
   this.props.user = {};
}
<button type="button" onClick={ resetToEmpty}>Clear form demo data</button>

代码沙箱https://x7069jq8lz.codesandbox.io/

如何将所有formIk字段重置为空值？

谢谢！

Answer 1

代码沙盒已损坏，但我认为您应该考虑将上述属性更改为空，并在Formik实例中添加“ enableReinitializing”属性。

然后在获取新道具后，应该更新Formik中的initialValue。

Answer 2

您必须再次将空的user传递给表单组件。因此，您必须使reset事件冒泡，也就是说，将其发送到最初传递用户对象的表单的父组件。

比方说，当您单击“重置”按钮时，必须在最初设置用户的位置执行此操作。当它作为道具传递给formik时，它应该放在您的父组件中。像这样：

user: { name: '', age: '', gender: null }