从子组件调用 React 中的函数

Question

在组件内部，有一个用于创建多个元素的映射。单击按钮可以删除每个元素：

const ParentComponent = () => {

   ...
   const [fields, setFields] = useState([{value: 'a', editable: false},
                                        [{value: 'b', editable: true},
                                        [{value: 'c', editable: false}]);

   const handleRemoveField = (id) => {
      const values = [...fields];
      values.splice(id, 1);
      setFields(values);
   }

   ...
   
   return (
      ...
      {fields.map((field, id) => {
          return (
             <div>
                ...
                <button onClick={() => handleRemoveField(id)}>delete</button>
             </div>
           );
       })}
      ...
     );

以上代码运行良好。当删除部分必须从模态组件而不是直接单击按钮来完成时，问题就出现了。

所以我创建了一个新的模态组件：

const DeleteModal = ({ isDeleteModalOpen, closeDeleteModal }) => {
    return (
        <Modal isOpen={isDeleteModalOpen}>
            <ModalTitle handleClose={closeDeleteModal} />
            <button onClick={deleteElement}> OK </button>
            <button onClick={closeDeleteModal}> cancel </button>
        </Modal>
       );
};

并在 ParentComponent 中导入了 DeleteModal。调用 handleRemoveField 时，不是直接删除元素，而是打开模式。

我不知道该怎么做的是在单击模态的确定按钮时删除 de 元素（deleteElement 模态的函数应该这样做）。

修改后的父组件：

const ParentComponent = () => {

   ...
   const [fields, setFields] = useState([{value: 'a', editable: false},
                                        [{value: 'b', editable: true},
                                        [{value: 'c', editable: false}]);

   const handleRemoveField = (id) => { // modified the method to call modal
      openDeleteModal(id); 
   };

   // added for open/close modal
   const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
       const openDeleteModal = () => {
       setDeleteModalOpen(true);
   };
   const closeDeleteModal = () => setDeleteModalOpen(false);

   ...
   
   return (
      ...
      {fields.map((field, id) => {
          return (
             <div>
                ...
                <button onClick={() => handleRemoveField(id)}>delete</button>
                // imported modal here:
                <DeleteModal
                    isDeleteModalOpen={isDeleteModalOpen}
                    closeDeleteModal={closeDeleteModal} />
             </div>
           );
       })}
      ...
     );

取消按钮起作用了，它关闭了模式。问题出在必须删除元素的确定按钮上。

如何做到？

Answer 1

您使用变量来保存要删除的项目

const [itemDel,setItemDel] = React.useState(null);

然后，当点击编辑显示模态时，将该项目设置为 itemDel（在 handleRemoveField 函数中）

类似

return (
      <>
      {fields.map((field, id) => {
          return (
             <div>
                ...
                <button onClick={() => handleRemoveField(id)}>delete</button>
             </div>
           );
       })}
  {
       !!itemDel&& <DeleteModal
                    isDeleteModalOpen={isDeleteModalOpen}
                    closeDeleteModal={closeDeleteModal} />
 }
      </>
     );

并且，当你完成后，或者想隐藏模态，只需调用 setItemDel(null)

Answer 2

您可以向 Modal 组件添加一个新道具，也许类似于 onDelete。比你可以传递一个删除你的元素的方法到 Modal 像这样：

<Modal
  isDeleteModalOpen={isDeleteModalOpen}
  closeDeleteModal={closeDeleteModal}
  onDelete={() => deleteElement(id)}
/>

在你的 Modal 组件中你可以调用你的 onDelete 属性来调用 deleteElement(id):

const DeleteModal = ({ isDeleteModalOpen, closeDeleteModal, onDelete }) => {
    return (
        <Modal isOpen={isDeleteModalOpen}>
            <ModalTitle handleClose={closeDeleteModal} />
            <button onClick={onDelete}> OK </button>
            <button onClick={closeDeleteModal}> cancel </button>
        </Modal>
       );
};

长话短说：您可以使用子组件传递一个方法以从那里调用它。

Answer 3

您可以在打开模态之前保存要删除的ID，并使用它来决定模态是否可见。

const [idToDelete, setIdToDelete] = useState(null);

const handleRemoveField = (id) => {
    setIdToDelete(id);
};

...    

<DeleteModal isDeleteModalOpen={idToDelete !== null} closeDeleteModal={closeDeleteModal} />

从子组件调用 React 中的函数

Call a function in React from child component

javascript

ecmascript-6

reactjs

react-hooks

use-state