将输入添加到反应中的 onclick 事件

Question

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

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

const { getFieldProps, touched, errors, isValid, handleSubmit } = useFormik({
    initialValues: {
      phone_name: '',
      phone_ddd: '',
      phone_number: '',
      phone_observation: ''
    },
    onSubmit: (values, actions) => {
      saveOrganization({
        variables: {
          name: values.phone_name,
          ddd: values.phone_ddd,
          number: values.phone_number,
          observation: values.phone_observation,
        }
    })
})

return (
<TextField
  margin="dense"
  id="phone_name"
  label={<IntlMessages id="name" />}
  fullWidth
  {...getFieldProps("phone_name")}
/>
{touched.phone_name && errors.phone_name ? (
  <small>{errors.phone_name}</small>
) : null}
<InputMask
mask="99"
disabled={false}
maskChar=" "
{...getFieldProps("phone_ddd")}
>
{() =>
  <TextField
  label={<IntlMessages id='ddd' />}
  fullWidth
  {...getFieldProps("phone_ddd")}
  />
}
</InputMask>
{touched.phone_ddd && errors.phone_ddd ? (
  <small>{errors.phone_ddd}</small>
) : null}
<InputMask
mask="999999999"
disabled={false}
maskChar=" "
{...getFieldProps("phone_number")}
>
{() =>
<TextField
label={<IntlMessages id='number' />}
fullWidth
{...getFieldProps("phone_number")}
/>
}
</InputMask>
{touched.phone_number && errors.phone_number ? (
  <small>{errors.phone_number}</small>
) : null}

我想添加一个按钮并出现新的输入

Answer 1

这是我的方法。 首先，我声明 initialValues 将字段“联系人”作为这样的数组

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

然后我创建一个 function 用于添加新字段

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

在渲染中只是 map 从这样的数组中取出

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