如何将 formik 与有状态的反应组件一起使用答案

【问题标题】：How to use formik along with a stateful react component如何将 formik 与有状态的反应组件一起使用
【发布时间】：2019-04-08 09:38:36
【问题描述】：

我刚开始学习 reactjs。我在搜索表单验证时遇到了 formik 和是的。到目前为止，我所经历的大多数示例都是关于无状态组件的。所以我想知道如何在有状态组件中使用 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;
}

感谢您的帮助。

谢谢

【问题讨论】：

标签： reactjs formik yup

【解决方案1】：

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

更简洁的方法是使用Formik 表单并将获取的数据添加为initalValues（但首先从当前inputs 中删除所有value 属性）。

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

【讨论】：