如何通过单击按钮添加空的新字段？

Question

如果单击 [=15=，我如何才能为 Inviteds 部分显示一个空字段 Name、Type、Email 的新行] ？现在我只有按钮...

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>

如何通过单击按钮添加空的新字段？

How can I add empty new fields by clicking on a button?

javascript

checkbox

reactjs

react-hooks