如何通過單擊按鈕添加空的新字段？

Question

如果我單擊+Add new invite ，如何顯示一個帶有空字段的新行Name 、 Type 、 Email for Inviteds部分？ 現在我只有按鈕...

export default function App() {
  ...    
  let handleSubmit = async (e) => {
    e.preventDefault();
    try {
      let res = await fetch("", {
        method: "POST",
        body: JSON.stringify({
          location: location,             
          ...
        })
      });
      let resJson = await res.json();
      if (res.status === 200) {
        setLocation("");
        ...
      } else {
        setMessage("Some error occured");
      }
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className="flex flex-col">
      ...
      <div className="mt-10 mb-3 h-6 text-md uppercase font-bold leading-8 text-gray-500">
        People
      </div>
      <button>+Add new invite</button>
      <form onSubmit={handleSubmit}>
        <span >
          Names:
        </span>
        <input
          type="text"
          value={invitedName}
          placeholder="Names"
          onChange={(e) => setInvitedName(e.target.value)}
        />           
      </form>
    </div>
  );
}

這里的圖片得到的想法：

Answer 1

受邀值應該是一個受邀對象數組，每個對象都具有name 、 age 、 email和location屬性。 添加新參與者時，添加新的被邀請者對象。 將受邀數組映射到字段輸入數組。

使用生成的 GUID 來識別您正在編輯的受邀者。

例子：

import { v4 as uuidV4 } from "uuid";

...

const [invited, setInvited] = useState([
  {
    id: uuidV4(),
    age: "",
    email: "",
    location: "",
    name: ""
  }
]);

const updateInvitee = (id) => (e) => {
  const { name, value } = e.target;
  setInvited((invitees) =>
    invitees.map((invited) =>
      invited.id === id
        ? {
            ...invited,
            [name]: value
          }
        : invited
    )
  );
};

const addInvitee = () => {
  setInvited((invitees) =>
    invitees.concat({
      id: uuidV4(),
      age: "",
      email: "",
      location: "",
      name: ""
    })
  );
};

...

<div className="mt-10 mb-3 h-6 text-md uppercase font-bold leading-8 text-gray-500">
  People
</div>
<button type="button" onClick={addInvitee}>
  +Add new participant
</button>
<form onSubmit={handleSubmit}>
  {invited.map(({ age, email, id, location, name }) => (
    <div key={id}>
      <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
        Names:
        <input
          type="text"
          value={name}
          placeholder="Names"
          name="name"
          onChange={updateInvitee(id)}
        />
      </label>
      <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
        Age:
        <input
          type="text"
          value={age}
          placeholder="Age"
          name="age"
          onChange={updateInvitee(id)}
        />
      </label>
      <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
        Location:
        <input
          type="text"
          value={location}
          placeholder="Location"
          name="location"
          onChange={updateInvitee(id)}
        />
      </label>
      <label className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
        Email:
        <input
          type="text"
          value={email}
          placeholder="Email"
          name="email"
          onChange={updateInvitee(id)}
        />
      </label>
    </div>
  ))}
</form>