如何在Formik表单中使用useState挂钩

时间:2019-06-14 10:20:15

标签: reactjs react-hooks formik

我正在使用formik表单,并且要在此表单上创建模式,如何使用useState挂钩?

FormReq = ({ values, errors, touched, handleChange, isSubmitting, handleBlur }) => 
(
 <>
     <div className="container">
         <Modal  email={values.email} password={values.password}/>
     </div>   
        <Form>
           <div className="container">
               <div className="form">
                   <Field type="email" name="email" placeholder="Email" onChange={handleChange} onBlur={handleBlur} className="inputField"/>
                   <Field type="password" name="password" placeholder="Password" onChange={handleChange} className="inputField"/>
                   <span className="buttonsubmit"> 
                       <button disabled={isSubmitting}>Submit</button> 
                    </span>
               </div>
           </div>
           <div className="container errors">
               { touched.email && errors.email && <p>{errors.email}</p> }       
               { touched.password && errors.password && <p>{errors.password}</p> }

           </div>
       </Form>
  </>
)


    const ContactUs = withFormik({
        mapPropsToValues({ email,   password}){
            return{
                email: email || '',
                password: password || ''
            }
        },
        validationSchema: Yup.object().shape({
            email: Yup.string().email('Email not valid').required('Email is required'),
            password: Yup.string().min(9, 'Password must be 9 characters or longer').required('Password is required')
          }),
        handleSubmit(values, { resetForm }){
            console.log(values);
            resetForm();
        }
    })(FormReq)

0 个答案:

没有答案