单击反应中的取消按钮时如何限制 formik 验证

Question

如果你在现场散焦而不提供任何东西，你也会得到验证错误，如果你点击提交按钮，你会得到验证错误，你也会收到验证错误，这是正确的，但是如何限制取消按钮，而不给出如果您单击取消按钮，则该字段中的任何数据都不会出现验证错误，如何限制 formik 验证仅适用于取消按钮或任何类型的 link。我可以将 validateOnBlur 特别用于取消按钮吗，因为在初始阶段，如果我使用它来禁用所有散焦类型的错误，但我只需要单击取消，验证错误就不会出现。我应该遵循什么方法。

    import React from "react";
    import { Formik, Form, Field } from 'formik';
     import * as Yup from 'yup';
    export default function DropDown() {
     const SignupSchema = Yup.object().shape({
        firstName: Yup.string()
          .min(2, 'Too Short!')
          .max(25, 'Too Long!')
          .required('Name is required'),
      });
      return (
        <>
          <h1>Signup</h1>
         <Formik
           initialValues={{
             firstName: '',
           }}
           //validateOnBlur={false}
           validationSchema={SignupSchema}
           onSubmit={values => {
             console.log(values);
           }}
         >
           {({ errors, touched }) => (
             <Form>
               <Field name="firstName" placeholder="type name" autoFocus="true" autoComplete="off"/>
               {errors.firstName && touched.firstName ? (
                 <div style={{color:"red"}}>{errors.firstName}</div>
               ) : null}
              <br/><br/>  
               <button type="submit" >Submit</button>
               <button type="submit" >Cancel</button>
             </Form>
           )}
         </Formik>
        </>
      );
    }

Answer 1

您正在使用触发表单的“提交”类型按钮。相反，您应该使用“按钮”类型：

<button type="button">Cancel</button>

文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Button#attr-type

Answer 2

当您使用 type="submit" 时，Formik 将立即捕获事件作为提交并进行验证。如果您不想触发验证或想手动触发验证，请不要使用 type="submit"。

如果您已经提交了表单，并且如果您想在用户单击取消时重置错误，请使用 setErrors

{({ errors, touched, setErrors })

然后在用户单击取消按钮时使用空参数调用 setErrors

<button type="button" onClick={() => setErrors({})}>Cancel</button>

单击反应中的取消按钮时如何限制 formik 验证

How to restrict formik validation when you click cancel button in react

javascript

reactjs

yup

formik