如何在reactjs中的formik表单的初始值中设置预字段数据

Question

我正在使用 React js 中的 map 函数创建一个 Formik 表单，但我还想从状态中填充初始数据。我可以通过设置初始值以静态形式使用它，如下面的代码

       <Formik
        initialValues={{
          firstName: Data.firstName,
          lastName: Data.lastName,
        }}
        validationSchema={SignupSchema}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            console.log("inside form", values);
            this.updateForm(values);
            setSubmitting(false);
          }, 400);
      }}>

所以，如果我像下面的代码一样创建输入，我该怎么做

    const masterCategory = Object.keys(campaignObj.newMasterCategory).map(item => {
     return (
       <Field name={`master_category${fc}`} key={fc}>
         {({ field }) => <input {...field} className="form-control nopadding-r input-width" type="text" placeholder="Enter Master Category" />}
      </Field>
    );

  });

并像这样渲染它

      <div className={`col-6 ${this.state.retailflag}`}>
          {masterCategory}
      </div>

Answer 1

对我有用。

import React, { Component } from "react";
import { Formik, Field } from "formik";

export default class Form extends Component {
  formlist = ["username", "password"];

  render() {
    return (
      <Formik
        initialValues={{ username: "", password: "" }}
        onSubmit={this.props.handleSubmit}
        {...this.props}
      >
        {formikProps => {
          return (
            <ul>
              {this.formlist.map((item, i) => {
                return (
                  <li key={i}>
                    <Field type="email" name={item} placeholder="Email" />
                  </li>
                );
              })}
              <li>
                <button type="submit" onClick={formikProps.handleSubmit}>
                  Login
                </button>
              </li>
            </ul>
          );
        }}
      </Formik>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

示例 => https://codesandbox.io/s/empty-monad-obfvx

如何在reactjs中的formik表单的初始值中设置预字段数据

How to set pre-field data in initial value of formik form in reactjs

reactjs

formik