Как использовать formik вместе с компонентом реагирования - PullRequest
Новая
       10

Как использовать formik вместе с компонентом реагирования

0 голосов
/ 05 ноября 2018

Я только начал изучать реагирование. Я столкнулся с formik и yup во время поиска подтверждения формы. Большинство примеров, которые я прошел до сих пор, говорят о компонентах без сохранения состояния. Итак, я хотел бы знать, как я могу использовать formik и yup в компоненте с состоянием?

У меня есть простая форма данных о сотруднике с адресом электронной почты, именем, фамилией, телефоном и городом. Данные для формы загружаются из базы данных. Как только данные загружены, пользователь может отредактировать их и сохранить в БД. Не могли бы вы помочь мне добавить formik и yup в мой проект, добавив проверку для всех моих полей выше? Мой код также присутствует здесь https://codesandbox.io/s/l26rqyx6j7

Моя форма приведена ниже EmpJobDetailsForm.js 

import React from "react";
import { getEmpDetails } from "./APIUtils";
import { withFormik, Form, Field } from "formik";
import Yup from "yup";

class EmpJobDetailsForm extends React.Component {
  state = {
    data: {}
  };

  componentWillMount() {
    this.getData();
  }

  getData = () => {
    let response = getEmpDetails();
    this.setState({ data: response });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div>
            <label htmlFor="email">Email</label>
            <input type="email" name="email" value={this.state.data.email} />
          </div>
          <div>
            <label htmlFor="firstName">First Name</label>
            <input
              type="text"
              name="firstName"
              value={this.state.data.firstName}
            />
          </div>
          <div>
            <label htmlFor="lastName">Last Name</label>
            <input
              type="text"
              name="lastName"
              value={this.state.data.lastName}
            />
          </div>
          <div>
            <label htmlFor="phone">Phone</label>
            <input type="text" name="phone" value={this.state.data.phone} />
          </div>
          <div>
            <label htmlFor="city">City</label>
            <input type="text" name="city" value={this.state.data.city} />
          </div>
          <div>
            <button type="button" className="outline">
              Reset
            </button>
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>
    );
  }
}
export default EmpJobDetailsForm;

У меня есть простой APIUtils.js. Это очень просто, и я добавлю код для извлечения данных из БД. 

export function getEmpDetails() {
  var employeeData = {};
  employeeData.email = "test@gmail.com";
  employeeData.firstName = "Luis";
  employeeData.middleName = "John";
  employeeData.lastName = "Nakano";
  employeeData.phone = "1112223333";
  employeeData.city = "Dallas";
  return employeeData;
}

Ценю вашу помощь.

Спасибо

1 Ответ

0 голосов
/ 06 ноября 2018

Formik с состоянием, его первой целью является «Получение значений в состоянии и из состояния формы» (без использования Redux-Form).

Более чистый способ сделать это - использовать форму Formik и добавить выбранные данные как initalValues (но сначала удалите все атрибуты value из текущего inputs ).

Вы также можете взглянуть на компонент высшего порядка withFormik и, в частности, параметр mapsPropsToValues ​​.

...