Question

我刚刚开始学习reactjs。我在搜索表单验证时遇到了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。这是非常基本的，我将在此处添加代码以从db获取数据。

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;
}

感谢您的帮助。

谢谢

Answer 1

Formik是有状态的，它的首要目标是“使值进入和脱离表单状态”（不使用Redux-Form）。

一种更清洁的方法是使用Formik表单，并将获取的数据添加为initalValues（但首先从当前{{1 }}。

您还可以查看“ withFormik”高阶组件，尤其是mapsPropsToValues选项。

如何将Formik与有状态的React组件一起使用

1 个答案: