React 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

代码沙盒坏了，但我认为你应该考虑在上面的状态下将你的道具更改为空，然后将“enableReinitializing”道具添加到你的 Formik 实例中。

然后在获得新道具后，您应该更新 Formik 中的 initialValues。

Answer 2

您必须再次将空user传递给表单组件。 因此，您必须冒泡重置事件，即将其发送到表单的父组件，您最初在该组件中传递了用户对象。

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

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