Question

我想做一张表格。其中包括商店创建，其中3个输入字段是计划名称，描述和cuisuine。之后，我要为计划的持续时间，最大持续时间和价格动态添加三个输入字段。我可以添加n个持续时间，然后我还想动态地添加所有输入字段，并单击一个按钮 计划名称，说明烹饪 持续时间

Answer 1

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

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

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

1 个答案: