我的按钮如何在每个新的添加部分下移动？现在，它放在所有部分上方

Question

如何修改代码以获取动态+添加invitee按钮，每次添加字段时都会向下移动最后一部分？目前，它出现在所有块上。

export default function App() {
  const [menu, setMenu] = useState("");

  return (
      <>
      <button type="button" onClick={addInvitee}>
        +Add Invitee
      </button>
      <form onSubmit={handleSubmit}>
        {invited.map(({ age, email, id, location, name }, index) => (
          <div key={id}>
            <div className="grid grid-cols-3 gap-5">
              <label className="mr-3 h-6 text-md font-bold">
                Names:
                <input
                  type="text"
                  value={name}
                  placeholder="Names"
                  name="name"
                  onChange={updateInvitee(id)}
                />
              </label>                
                ...
              {!!index && (
                <button type="button" onClick={() => removeInvitee(id)}>
                  Remove
                </button>
              )}
            </div>
          </div>
        ))}
      </form>
    </>
  );
}

这是我的：
代码

Answer 1

为此，您只需要按下表格下的按钮即可。

export default function App() {
  const [menu, setMenu] = useState("");

  return (
      <>
      
      <form onSubmit={handleSubmit}>
        {invited.map(({ age, email, id, location, name }, index) => (
          <div key={id}>
            <div className="grid grid-cols-3 gap-5">
              <label className="mr-3 h-6 text-md font-bold">
                Names:
                <input
                  type="text"
                  value={name}
                  placeholder="Names"
                  name="name"
                  onChange={updateInvitee(id)}
                />
              </label>                
                ...
              {!!index && (
                <button type="button" onClick={() => removeInvitee(id)}>
                  Remove
                </button>
              )}
            </div>
          </div>
        ))}
      </form>
       <button type="button" onClick={addInvitee}>
        +Add Invitee
      </button>
    </>
  );
}

另外，您可以样式的按钮或用DIV包装，以进行更复杂的样式，以从您共享的照片中实现示例。

这是一个工作示例的Alink： codesandbox