javascript - React FormIk 将值重置为空值 handleReset 函数

Question

我有一个加载默认值的表单。

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

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

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

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

谢谢！

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

user您必须再次向表单组件传递一个空值。所以你必须冒泡重置事件，也就是说，将它发送到你最初传递用户对象的表单的父组件。

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

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

2 回答 2