Question

我有一个用formik制作的表格，其中输入的信息之一是联系人，但是用户可以有多个联系人。

我想添加一个按钮，单击时会显示用于输入更多联系人的新字段。我尝试了一些逻辑，但无济于事

Filter => Id's with [Stage]="on" when [Revision]="FY20 P07".

我想添加一个按钮，然后出现新输入

Answer 1

这是我的方法。首先，我声明initialValues具有字段“ contact”作为这样的数组

useFormik({
    initialValues: {
      contact: [
        {
          name: "",
          age: "",
        },
      ],
    },
  });

然后我创建一个用于添加新字段的函数

const handleNewField = () => {
    formik.setFieldValue("contact", [
      ...formik.values.contact,
      { name: "", age: "" },
    ]);
  };

然后在渲染中像这样从数组中将其映射出来

<form onSubmit={formik.handleSubmit}>
    {formik.values.contact.map((contact, index) => (
        <div key={index}>
            <label>Name</label>
            <input {...formik.getFieldProps(`contact[${index}].name`)} />
            <label>Age</label>
            <input {...formik.getFieldProps(`contact[${index}].age`)} />
        </div>
    ))}
    <button type="submit">Submit</button>
    <button type="button" onClick={handleNewField}>
        New Field
    </button>
  </form>

我已经尝试过了，这对我来说很好。如果您有任何问题，请随时问我。

最终代码如下

import React from "react";
import { useFormik } from "formik";

function App() {
  const formik = useFormik({
    initialValues: {
      contact: [
        {
          name: "",
          age: "",
        },
      ],
    },
    onSubmit: (values) => {
      console.log(values);
    },
  });

  const handleNewField = () => {
    formik.setFieldValue("contact", [
      ...formik.values.contact,
      { name: "", age: "" },
    ]);
  };

  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
        {formik.values.contact.map((contact, index) => (
          <div key={index}>
            <label>Name</label>
            <input {...formik.getFieldProps(`contact[${index}].name`)} />
            <label>Age</label>
            <input {...formik.getFieldProps(`contact[${index}].age`)} />
          </div>
        ))}
        <button type="submit">Submit</button>
        <button type="button" onClick={handleNewField}>
          New Field
        </button>
      </form>
    </div>
  );
}

export default App;

在react中将输入添加到onclick事件

1 个答案: