reactjs - 发生验证错误时处理 formik 表单

Question

我在 native 代码中有一个 formik 形式，如下所示。
可以在以下位置查看完整的可运行链接:
here

当前行为:
验证只能通过 handleSubmit 完成, with 不能用于处理进一步的操作。注意事项 onSubmit如果 handleSubmit 不会触发检测到有任何验证错误。

 <Button onPress={handleSubmit} style={styles.button}>
     Submit
 </Button>

预期解决方案:
尝试提交后验证失败时调用的生命周期事件(例如: onValidationError )，我可以在其中访问所有输入验证错误 Prop 以进行进一步操作。

例如:我想处理一些事情(比如在验证失败时弹出警报或滚动到第一条错误消息)

代码应该是类似follow 的东西，或者任何其他的方式也可以被接受。只要我可以在发生验证错误时处理事件。

 <Formik
    onSubmit={values => {
       alert(JSON.stringify(values, null, 2));
       Keyboard.dismiss();
    }}
    onValidationError={errorValues => {
       // any action here
       // note that onValidationError is not a built in function
       // but it would be best if it can be achieved this way
       // else any other equivalent solution also can be accepted
    }}
    validationSchema={validationSchema}>

有什么尝试？
我试图在这里集成 2 个解决方案。但未能得到它的工作。
https://github.com/jaredpalmer/formik/issues/1019
https://github.com/jaredpalmer/formik/issues/1484

Answer 1

您可以使用 isValid Prop (来自 <Formik> 的渲染 Prop )在 <form>的 onsubmit通过绕过你的逻辑作为事件( Documentation )

<form
  onSubmit={e => {
    console.log("isValid", isValid);
    isValid
      ? handleSubmit(e)
      : alert("Handle your custom method instead here");
  }}
>

您可以访问 isValid来自 formik 上渲染 Prop 的 Prop

 {props => {
    const {
      values,
      touched,
      errors,
      dirty,
      isSubmitting,
      handleChange,
      handleBlur,
      handleSubmit,
      handleReset,
      isValid // add this to your code
    } = props;
    return ( ... your code );
}}

我也制作了代码和盒子，你可以在这里查看工作示例 - https://codesandbox.io/s/trusting-jennings-7wq0f

备注 :这在formik存储库或任何地方的任何问题上都没有正式提及，但这是自定义方式拦截 submit对 <form> 采取行动的 onsubmit事件

希望这是有帮助的!