Question

我在react js中使用formik。.目前，我只是添加了enableReinitialize以在状态发生任何变化后更新initialValues。.因此，即使更正了文本，此处仍显示验证消息。在文本框外单击后，将删除此验证消息。文本框中的数据更正后，我可以隐藏此消息吗？
Dirty和isValid会使按钮保持禁用状态，即使没有验证。

Register.JS

        import React, { Component, useState } from 'react';
         import {Formik} from 'formik';
         import validateSignUp from '../../containers/Validations/SignUp/SignUpValidation'
          class Register extends Component {
           constructor(props) {
            super();
            this.state = {
            fields: {CountryCode:'', EmailId:'', Password:''},
             errors: {},
           };
             this.handleChange = this.handleChange.bind(this);
           }
          handleChange(e) {
          let fields = this.state.fields;
          fields[e.target.name] = e.target.value;
          this.setState({
          fields,
         });
         }
          handleSubmit(){
         console.log(this.state.fields);
        }

 render() {

  return (
    <Formik
    enableReinitialize
    initialValues={this.state.fields}
    validate={validateSignUp}
    >
    {({errors, touched, handleBlur, isSubmitting, isValid, dirty}) => (
    <div className='signUp-form form_wrapper'>
      <div className='form-body'>
        <form name='first' onSubmit={this.handleSubmit}>
          <div className='row'></div>
  
                <div className='form-group'>
                  <label>Email address</label>
                  <input type='email' name="EmailId"
                    onChange={this.handleChange} placeholder='abc@example.com'
                    onBlur={handleBlur} value={this.state.fields.EmailId} 
                    className='form-control'/>
                  <div className='info-message'>
                    <div className='errorMsg'>{errors.EmailId && 
                    touched.EmailId && errors.EmailId}</div>
                  </div>
                </div>
  
                <div className='form-group'>
                  <label>Password</label>
                  <input type='password' name="Password"  
                    onChange={this.handleChange} onBlur={handleBlur} value={this.state.fields.Password}
                    className='form-control'/>
                  <div className='info-message'>
                    <div className='errorMsg'>{errors.Password && 
                    touched.Password && errors.Password}</div>
                  </div>
                </div>

          <button type='submit' disabled={!(isValid && dirty)} className='btn btn-danger'>
            continue
          </button>
        </form>
      </div>
    </div>
    )}
    </Formik>
  );


  }
 }

export default Register;

SignUpValidation.JS

const validateSignUp = validate => {
const errors = {};
 if (!validate.EmailId) {
   errors.EmailId = 'Please Enter Email ID';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(validate.EmailId)) {
    errors.EmailId = 'Invalid email address';
  }
   if (!validate.Password) {
   errors.Password = 'Please Enter New Password Which you want to set';
    } else if (!validate.Password.match(/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.* 
    [@#$%&]).*$/)) {
  errors.Password = 'Password Must contain at least one number and one uppercase and lowercase 
  letter, and at least 8 or more characters';
    }
   return errors;
   };
 export default validateSignUp;

Answer 1

我认为您应该使用yup进行Formik验证，因为它会自动处理这些情况。

React JS中Formik面临的验证和isValid问题

1 个答案: