Как использовать Formik внутри компонента ввода - PullRequest
Новая
       5

Как использовать Formik внутри компонента ввода

0 голосов
/ 14 марта 2020

Я создал компонент ввода, чтобы попытаться избежать повторения bootstrap divs / classes. Это выглядит так: 

import React from "react";
import "./Input.css";

const Input = ({ name, label, error, ...rest }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        {...rest}
        id={name}
        name={name}
        className="form-control form-control-lg"
      ></input>
      {error && <span className="input-error">{error}</span>}
    </div>
  );
};

export default Input;

Затем в форме я просто называю это так: 

<Input name="lastName label="Last Name" type="text" />

Но поскольку я хочу использовать Formik, я должен добавить onBlur, onChange и ошибка. Но это очень повторять, чтобы добавить их к каждому входу. Я пытался добавить их в мой компонент ввода, но я, очевидно, получаю ошибки об отсутствии useFormik, и я немного застрял. Это входные данные после добавления formik 

          <Input
            name="lastName"
            label="Last Name *"
            type="text"
            value={formik.values.lastName}
            onBlur={formik.handleBlur}
            onChange={formik.handleChange}
            error={formik.touched.lastName && formik.errors.lastName}
          />

Я в основном хочу иметь возможность добавлять onBlur, onChange и error к компоненту ввода.

1 Ответ

0 голосов
/ 20 марта 2020

Вы должны обернуть свои входные данные с помощью Formik, так как он вводит контекст в дерево React, тогда вы сможете использовать useField в своем пользовательском компоненте ввода.

...