我的按钮如何在每个新添加的部分下移动？现在它位于所有部分之上

Question

如何修改我的代码以获得动态 +Add 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>
    </>
  );
}

这是我的：
code

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 包裹它以获得更复杂的样式，以实现您分享的照片中的示例。

这是一个工作示例的链接：codesandbox

我的按钮如何在每个新添加的部分下移动？现在它位于所有部分之上

How my button can move under each new added sections? For now it's placed above all sections

button

reactjs