如何在React模态框组件中调用自定义Hook内的函数？

要实现这个需求，你需要把Hook里的删除逻辑、模态框的控制状态暴露出来，再通过props把删除逻辑传递给模态框的确认按钮。具体修改步骤如下：

1. 修改自定义Hook useTableResource #

让Hook返回需要的方法和状态，同时在Hook内部管理模态框的显示状态和当前待删除的行：

import { useState } from 'react';
import axios from 'axios';
import TrashButton from './TrashButton'; // 确保组件路径正确

const useTableResource = () => {
  const [showModal, setShowModal] = useState(false);
  const [currentRow, setCurrentRow] = useState(null);

  // 异步删除函数
  const deleteButton = async (row) => {
    await axios.delete(`test/api/resources?_id=${row.original._id}`);
    console.log("deleted");
  };

  // 打开模态框并记录当前要删除的行
  const openDeleteModal = (row) => {
    setCurrentRow(row);
    setShowModal(true);
  };

  // 关闭模态框并清空当前行记录
  const closeDeleteModal = () => {
    setShowModal(false);
    setCurrentRow(null);
  };

  // 确认删除：调用删除函数后关闭模态框
  const confirmDelete = async () => {
    if (currentRow) {
      await deleteButton(currentRow);
      closeDeleteModal();
    }
  };

  const DeleteHooks = (hook) => {
    hook.visibleColumns.push((columns) => [
      ...columns,
      {
        id: 'delete',
        accessor: () => 'delete',
        Cell: ({ row }) => (
          <div onClick={(event) => event.stopPropagation()}>
            {/* 点击删除按钮时打开模态框 */}
            <TrashButton onClick={() => openDeleteModal(row)} />
          </div>
        )
      }
    ]);
  };

  // 返回需要对外暴露的方法和状态
  return {
    DeleteHooks,
    showModal,
    closeDeleteModal,
    confirmDelete
  };
};

export default useTableResource;

2. 修改TrashModal组件 #

让模态框接收show、handleClose、handleConfirm三个props，确认按钮直接绑定handleConfirm：

import Modal from 'react-bootstrap/Modal'; // 假设使用react-bootstrap的Modal组件
import Button from 'react-bootstrap/Button';

const TrashModal = ({ show, handleClose, handleConfirm }) => {
  return (
    <>
      <Modal show={show} onHide={handleClose} className="Trashmodal">
        <Modal.Header closeButton>
          <Modal.Title>注意</Modal.Title>
        </Modal.Header>
        <Modal.Body>确认要删除这条数据吗？</Modal.Body>
        <Modal.Footer className="FooterTrash">
          <Button className="btn btn-sm" variant="secondary" onClick={handleClose} autoFocus={true}>
            取消
          </Button>
          <Button className="btn btn-sm btn-primary" onClick={handleConfirm} autoFocus={true}>
            <i className="fa fa-check" aria-hidden="true"></i>确认删除
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default TrashModal;

3. 在表格页面整合Hook与模态框 #

在使用react-table的页面中，调用自定义Hook并渲染模态框：

import { useTable } from 'react-table';
import useTableResource from './useTableResource';
import TrashModal from './TrashModal';

const TablePage = () => {
  const { DeleteHooks, showModal, closeDeleteModal, confirmDelete } = useTableResource();
  
  // 初始化react-table时应用自定义Hook
  const tableInstance = useTable(
    { columns, data }, // 这里替换为你的表格列配置和数据
    DeleteHooks
  );

  return (
    <>
      {/* 这里放置你的表格渲染代码 */}
      <TrashModal 
        show={showModal} 
        handleClose={closeDeleteModal} 
        handleConfirm={confirmDelete} 
      />
    </>
  );
};

内容的提问来源于stack exchange，提问作者Mark