Json React：在动态输入文件中动态添加输入字段

我想做一张表格。其中包括一个车间创建，其中3个输入文件为计划名称、说明和提示。在这三个输入文件之后，我想为计划的持续时间、最大持续时间和价格动态添加它们。我可以添加n个持续时间，然后我还希望在单击的按钮上动态添加所有输入字段 计划名称， 说明 cuisuine

---

duration

我不太理解这个问题，但通过以下方法，您可以动态生成一组输入字段。我希望有帮助：）

import React，{useState}来自“React”；
导出默认函数示例（）{
常量模型={name:，desc:，cuisuine:}；
const[durations，setDurations]=useState（[model]）；
常量字段=[“名称”、“说明”、“提示”]；
函数句柄更改（字段、索引、值）{
设newDurations=持续时间；
newDurations[索引][字段]=值；
设置持续时间（新持续时间）；
}
返回(
{durations.map（（v，i）=>(
{fields.map（field=>(
handleChange（字段，i，target.value）}
/>
))}
))}
setDurations（[…durations，model]）}>
添加字段
);
}

hi@Tarun Choudhary，欢迎来到Stackoverflow。目前还不完全清楚你的问题是什么。尽量使它具体化。您还应该提供一些代码，说明您已经实现了什么、尝试了什么以及当前遇到了什么错误或问题。否则人们会很难帮助你。此外，Stackoverflow的目的不是为您编写代码，因此您至少应该在发布问题之前尝试一些东西。

import React, { useState } from "react";

export default function Example() {
  const model = { name: "", desc: "", cuisuine: "" };
  const [durations, setDurations] = useState([model]);
  const fields = ["name", "desc", "cuisuine"];

  function handleChange(field, index, value) {
    let newDurations = durations;
    newDurations[index][field] = value;
    setDurations(newDurations);
  }

  return (
    <div style={{ padding: "20px" }}>
      {durations.map((v, i) => (
        <div
          style={{ border: "1px solid #ccc", padding: "20px" }}
          key={`duration-${i}`}>
          {fields.map(field => (
            <input
              key={`duration-${i}-${field}`}
              type="text"
              name={field}
              placeholder={field}
              onChange={({ target }) => handleChange(field, i, target.value)}
            />
          ))}
        </div>
      ))}
      <button onClick={() => setDurations([...durations, model])}>
        Add field
      </button>
    </div>
  );
}