Formik рендеринг элемента при нажатии поля ввода в реагировать? - PullRequest
Новая
       6

Formik рендеринг элемента при нажатии поля ввода в реагировать?

0 голосов
/ 09 апреля 2020

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

import React from "react";
import { Formik } from "formik";
import * as EmailValidator from "email-validator";
import * as Yup from "yup";
const ValidatedLoginForm = () => (
  <Formik
initialValues={{ email: "", password: "" }}
onSubmit={(values, { setSubmitting }) => {
  console.log(values);
  console.log("hello there ");
}}

validationSchema={Yup.object().shape({
  email: Yup.string()
    .email()
    .required("Required"),
  password: Yup.string()
    .required("No password provided.")
    .min(8, "Password is too short - should be 8 chars minimum.")
    .matches(/(?=.*[0-9])/, "Password must contain a number.")
})}>

    {props => { 
    const {
    values,
    touched,
    errors,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit
  } = props;
  return (
<div className="container">
    <div className="row">

    <form onSubmit={handleSubmit}>


      <br />
      <input
        name="email"
        type="text"
        placeholder="Enter your email"
        value={values.email}
        onChange={handleChange}
        onBlur={handleBlur}
        className={errors.email && touched.email && "error"}
      />
      <br />
      <br />
      {errors.email && touched.email && (
        <div className="input-feedback">{errors.email}</div>
      )}


      <br />
      <input
        name="password"
        type="password"
        placeholder="Enter your password"
        value={values.password}
        onChange={handleChange}
        onBlur={handleBlur}
        className={errors.password && touched.password && "error"}

      /> <br />
      <br />
      {errors.password && touched.password && (
        <div className="input-feedback">{errors.password}</div>
      )}
      <button type="submit" disabled={isSubmitting}>
        Login
      </button>
    </form>

    </div>
    <div className="row">
        <button className="btn btn-default">Value</button>
    </div>
</div>
  );
}}

1 Ответ

0 голосов
/ 09 апреля 2020

Может быть, это поможет вам. Попробуйте добавить функцию в пропеллер onBlur, а затем обработать функцию handleBlur. 

onBlur={(e) => {
   handleBlur(e);
   // here handle component showing 
}}
...