在反應中單擊取消按鈕時如何限制formik驗證-有解無憂

如果您在未提供任何內容的情況下散焦，則從該欄位中獲取驗證錯誤以及未提供值如果您單擊提交按鈕，您將收到驗證錯誤這是正確的，但是如何限制取消按鈕而不在該欄位中提供任何資料如果您單擊取消按鈕，則不應該出現驗證錯誤，如何將 formik 驗證限制為僅用于取消按鈕或任何型別的鏈接。我可以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>
    </>
  );
}

uj5u.com熱心網友回復：

當您使用type="submit"Formik 時，會立即將事件捕獲為提交并進行驗證。type="submit"如果您不想觸發驗證或想手動觸發驗證，請勿使用。

如果您已提交表單，并且如果您想在用戶單擊取消時重置錯誤，則使用setErrors

{({ errors, touched, setErrors })

然后setErrors在用戶單擊取消按鈕時使用空引數呼叫

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

uj5u.com熱心網友回復：

您正在使用觸發表單的“提交”型別按鈕。相反，您應該使用“按鈕”型別：

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/457429.html

標籤：javascript 反应形式对

上一篇：從帶有``注釋的HTML字串中僅提取`className`之后的字符

下一篇：從兩個陣列創建二維陣列