使用formik和yup是为了解决react-form表单验证不使用插件的繁琐，form表单验证使用onChange事件触发写入的表单规则，然后写入表单不同类型的规则校验逻辑定义状态//关键代码逻辑//组件触发区//onchange触发事件handleInputChange=(value,field)=>{this.setState({[field]:value},()=>{setTimeout(()=>{if(field==='Email'){this.checkInputEmail(value);}if(field==='Password'){this.checkInputPassword(value);}if(field==='ResetEmail'){this.checkResetPasswordEmail(value)}},600);});}//邮件格式验证checkInputEmail(email){leterrorMsg='';让布尔=假；if(email===undefined||email===''){errorMsg=this.state.isLoginPage？'Emailisrequired':'请输入有效的电子邮箱';}if(errorMsg===''){letreg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;bool=reg.test(email);errorMsg=布尔值？''：'不合规电邮';}this.setState({emailError:errorMsg});returnbool;}可见繁琐的逻辑需要我们单独设置状态，规则编写麻烦。随着需要编写的类型的增加，代码量也随之增加。使用formik-yup编写验证规范。首先简单了解一下formik和yupformik的原理：内置消除了表单的状态管理操作，不需要单独为表单创建状态，使用Context让表单组件可以嵌套在多层中，不再需要逐层传递。Yup是一个模式生成器，用于运行时值解析和验证、定义模式、转换值以匹配、断言等。formik--prop-api链接：https://formik.org/docs/api/f...yup-github链接：https://github.com/jquense/yup示例说明//需要导入//useFormik()是一个自定义的Reacthook//官网使用示例：https://formik.org/docs/api/useFormikimport{useFormik}from'formik';import*asyupfrom'yup';//需要定义Theformik-prop-api.可以查看官网了解/*initialValues：初始化所需数据onSubmit：获取表单各个字段，定制自己的业务操作validationSchema：结合yup的验证方式*/const{values,errors,touched,handleBlur,handleChange,handleSubmit}=useFormik({initialValues,onSubmit:handleFormSubmit,validationSchema:formSchema});//初始表单数据constinitialValues={email:'',};//yup规则，可以查看yup-github链接查看相关api用法。constformSchema=yup.object().shape({//name:yup.string().required('${path}isrequired'),email:yup.string().email('invalidemail').required('${path}isrequired'),});/*注意'${path}isrequired'使用的是字符串语法，不是es2015引入的模板字符串，因为后者在编译时会链接到对应的变量，但是path不是预定义的变量，所以报错。所以这里只是一个类似于普通字符串中使用的模板字符串的语法。*///组件使用
