我想将值重置为初始值 formik

Question

我正在从后端获取一些值并且我处于状态字符串并使用 throw formik 我的任务是我创建重置 onClick 就像我编辑某些东西但我不想使用它然后如果我点击重置 onClick 然后它设置为初始值，我创建一个状态并在 onClick 中更新它但是如果我在控制台中检查我得到初始值但是在 UI 没有任何反应参见图像以供参考

const [formValue, setFormValue] = useState(null);
  useEffect(() => {
    fetchSearchRule(rules);
  }, []);
  let initialValues = {
    exactNameMatch: rules.exactNameMatch,
    partialNameMatch: rules.partialNameMatch,
    partialNameMatchThreshold: rules.partialNameMatchThreshold,
    exactDOBMatch: rules.exactDOBMatch,
    partialDOBMatch: rules.partialDOBMatch,
    partialDOBMatchThreshold: rules.partialDOBMatchThreshold,
    countryMatch: rules.countryMatch,
    zipCodeMatch: rules.zipCodeMatch,
    completeAddressMatch: rules.completeAddressMatch,
    partialAddressMatchThreshold: 50,
    allSanctionsList:checked,
    FormChangeCount: 0,
  };

  const ruleForm = useFormik({
    initialValues,
    enableReinitialize: true,
    onSubmit: (values) => {
      updateSearchRules(values);
      setChangeRuleSettings(false);
      ruleForm.values.FormChangeCount = 0;
    },
  });

                <Box>
                  <Typography
                    onClick={() => {setFormValue(initialValues)
                      setChangeRuleSettings(false);
                    }}
                    color="secondary"
                    variant="subtitle2"
                    style={{ cursor: "pointer" }}
                  >
                    Reset Rule
                  </Typography>
                </Box>

Answer 1

我觉得有点难以理解你的问题，但我会尽力回答。如果你只想在用户点击文本 Reset Rule 时重置整个表单，那么使用 Formik 的函数 resetForm:

<Box>
    <Typography
        onClick={ruleForm.resetForm}
        color="secondary"
        variant="subtitle2"
        style={{ cursor: "pointer" }}
    >
    Reset Rule
    </Typography>
</Box>

如果您想重置表单中的某些值而不是全部，请将这些输入名称传递给 resetForm():

onClick={()=>{
  ruleForm.resetForm({
    values: {
      partialDOBMatchThreshold: rules.partialDOBMatchThreshold
    }
  })
}}

此外，从状态中删除 formValue，没有必要。

我想将值重置为初始值 formik

I want to reset value to initial value formik

javascript

reactjs

formik