Попытка создать счетчик для каждого заполнения поля ввода в React с Formik

Вот он: Вы также можете зайти в эту песочницу, которую я создал:

https://codesandbox.io/s/0ovjx025lp

import React from "react";
import { render } from "react-dom";
import { Formik } from "formik";
import * as Yup from "yup";

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }
  increment = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  };

  decrement = () => {
    this.setState({
      counter: this.state.counter - 1
    });
  };

  render() {
    return (
      <React.Fragment>
        <h3>Counter:: {this.state.counter}</h3>
        <App handleIncrement = {this.increment} />
      </React.Fragment>
    );
  }
}

const App = originalProps => (
  <div className = "app">
    <h1>
      Basic{" "}
      <a
        href = "https://github.com/jaredpalmer/formik"
        target = "_blank"
        rel = "noopener"
      >
        Formik
      </a>{" "}
      Demo
    </h1>

    <Formik
      initialValues = {{ email: "" }}
      onSubmit = {(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 500);
      }}
      validationSchema = {Yup.object().shape({
        email: Yup.string()
          .email()
          .required("Required")
      })}
    >
      {props => {
        const {
          values,
          touched,
          errors,
          dirty,
          isSubmitting,
          handleChangeEvent,
          handleBlur,
          handleSubmit,
          handleReset
        } = props;
        return (
          <form onSubmit = {handleSubmit}>
            <label htmlFor = "email" style = {{ display: "block" }}>
              Email
            </label>
            <input
              id = "email"
              placeholder = "Enter your email"
              type = "text"
              value = {values.email}
              onChange = {e => {
                originalProps.handleIncrement();
                handleChangeEvent(e);
              }}
              onBlur = {handleBlur}
              className = {
                errors.email && touched.email
                  ? "text-input error"
                  : "text-input"
              }
            />
            {errors.email && touched.email && (
              <div className = "input-feedback">{errors.email}</div>
            )}

            <button
              type = "button"
              className = "outline"
              onClick = {handleReset}
              disabled = {!dirty || isSubmitting}
            >
              Reset
            </button>
            <button type = "submit" disabled = {isSubmitting}>
              Submit
            </button>
          </form>
        );
      }}
    </Formik>
  </div>
);

render(<Parent />, document.getElementById("root"));

Только что внимательно посмотрел документацию Formik. У них есть довольно подробный пример того, что вы можете сделать здесь: https://jaredpalmer.com/formik/docs/api/field#validate.

С другой стороны, я создал песочницу, чтобы вы могли понять, как воспроизвести то, что вы ищете.

Родительский компонент:

import React from "react";
import Child from "./Child";

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }

  handleIncrement = event => {
    this.setState({
      counter: this.state.counter + 1
    });
  };

  handleDecrement = event => {
    this.setState({
      counter: this.state.counter - 1
    });
  };

  render() {
    return (
      <div>
        <h3>Parent Counter: {this.state.counter}</h3>
        <Child
          onComplete = {this.handleIncrement}
          onInvalidate = {this.handleDecrement}
        />
      </div>
    );
  }
}

export default Parent;

Дочерний компонент:

import React from "react";
import { Formik, Form, Field } from "formik";

class Child extends React.Component {
  state = {
    emailValid: false,
    passwordValid: false
  };
  //value is passed in implicitly from the Field
  validateEmail = value => {
    //insert email logic here
    if (value.includes("@") && !this.state.emailValid) {
      this.setState({
        emailValid: true
      });
      //if field is complete then increase counter on parent
      this.props.onComplete();
    } else if (!value.includes("@") && this.state.emailValid) {
      this.setState({
        emailValid: false
      });
      //if field was valid and no longer is valid
      this.props.onInvalidate();
    }
  };

  validatePassword = value => {
    //insert password logic here
    if (value.length >= 6 && !this.state.passwordValid) {
      this.setState({
        passwordValid: true
      });
      this.props.onComplete();
    } else if (value.length < 6 && this.state.passwordValid) {
      this.setState({
        passwordValid: false
      });
      //if field was valid and no longer is valid
      this.props.onInvalidate();
    }
  };

  handleSubmit = event => {
    event.preventDefault();
  };

  render() {
    return (
      <div className = "app">
        <Formik
          initialValues = {{ email: "", username: "" }}
          onSubmit = {this.handleSubmit}
        >
          {({ errors, touched }) => (
            <Form>
              <Field validate = {this.validateEmail} name = "email" type = "email" />
              {errors.email && touched.email ? <div>{errors.email}</div> : null}
              <Field validate = {this.validatePassword} name = "password" />
              {errors.password && touched.password ? (
                <div>{errors.username}</div>
              ) : null}
              <button type = "submit">Submit</button>
            </Form>
          )}
        </Formik>
      </div>
    );
  }
}

export default Child;

https://codesandbox.io/s/8x736oqwq0

В конечном итоге вам придется изменить его в соответствии с вашей логикой. Дайте мне знать, если у вас есть вопросы. :)