Блог

1. Я использую formik в react js .. в настоящее время я только что добавил enableReinitialize для обновления начальных значений после любого изменения состояния.. итак, здесь сообщение о проверке отображается даже после исправления текста. Это сообщение о проверке удаляется после щелчка вне текстового поля. могу ли я скрыть это сообщение, как только данные будут исправлены в текстовом поле.

2. Грязный и 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 amp;amp; 
                    touched.EmailId amp;amp; 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 amp;amp; 
                    touched.Password amp;amp; errors.Password}</div>
                  </div>
                </div>

          <button type='submit' disabled={!(isValid amp;amp; 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])(?=.* 
    [@#$%amp;]).*$/)) {
  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;
  

Я думаю, вам следует использовать yup для проверки formik, поскольку он автоматически обрабатывает эти случаи.