如何使用事件处理程序一次或多次渲染相同的组件

Question

我想构建一个表单，其中有一些文本字段，如图所示

在这个表单中有一个按钮，点击Add Units按钮后会出现一个新的表单

如何使用按钮 onClick 事件处理程序 呈现此子表单，并且我还想在单击按钮时多次呈现它，如果我单击一次按钮，则会显示如果我点击按钮两次，子表单只会显示一次，然后它会显示两次

-主要问题是我希望子表单在我单击按钮时出现多次

（可选如果我想使用按钮单击删除呈现的子表单，请提及代码）

最好使用反应钩子
你可以问我任何与问题有关的事情

Answer 1

以下是如何解决您的问题的示例。您不需要 useEffect，也不需要三个单独的状态变量。你只需要一组对象。

import React, { useState } from "react";
import ContainerSlot from "./ContainerSlot";

function ReceiptContainer() {
  const [containers, setContainers] = useState([]);

  const handleAddContainer = () => {
    // adding an empty object; you will likely need to
    // initialize this object with whatever values are stored
    // in the container form
    setContainers((current) => [...current, {}]);
  };
  const handleRemove = (index) => {
    const current = [...containers];
    current.splice(index, 1);
    setContainers(current);
  };

  return (
    <div className="receiptContainer container">
      {/* Heading */}
      <div className="receiptContainer__heading mt-3">
        <h4>Container Invoice</h4>
        <hr />
      </div>
      <button onClick={handleAddContainer}>Add container</button>
      <div className="receiptContainer__container">
        {/* You will likely need to pass whatever values are in 
        the container to your ContainerSlot component */}
        {containers.map((container, index) => {
          const handleRemoveClick = () => {
            handleRemove(index);
          };
          return (
            <div
              key={`container-${index}`}
              style={{ display: "flex", alignItems: "center" }}
            >
              <div>
                <ContainerSlot {...container} />
              </div>
              <div>
                <button onClick={handleRemoveClick}>Remove</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default ReceiptContainer;

编辑：更新以显示如何删除项目