React中表格行内按钮无法触发Modal弹窗的问题求助

你的问题在于直接在onClick里调用Modal()组件函数，这不是React组件的正确使用方式。React组件需要被渲染到DOM中，通过状态来控制它的显示/隐藏。以下是完整的修复步骤：

步骤1：在Users.js中引入Modal并添加状态管理 #

首先在Users.js顶部引入Modal组件，然后使用useState管理弹窗可见性与当前待删除用户ID：

import Modal from './Modal'; // 确保路径与你的文件结构匹配
import { useState } from 'react';

const Users = () => {
  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
  const [currentDeleteUserId, setCurrentDeleteUserId] = useState(null);
  
  // 确认删除的处理函数，后续可补充API删除逻辑
  const handleConfirmDelete = () => {
    // 示例：调用删除API
    // fetch(`/api/users/${currentDeleteUserId}`, { method: 'DELETE' })
    //   .then(res => res.json())
    //   .then(() => {
    //     // 更新表格数据（比如重新获取用户列表）
    //     setDeleteModalVisible(false);
    //   });

    // 先关闭弹窗，后续补充实际业务逻辑
    setDeleteModalVisible(false);
  };

  // 其他现有代码...

步骤2：修改Delete按钮的onClick事件 #

替换原来调用Modal()的代码，改为设置弹窗可见并记录当前用户ID：

<CDropdownItem
  className="dropdown-item text-danger pointer"
  onClick={() => {
    setCurrentDeleteUserId(item.userID); // 注意：循环变量是item，不是rows
    setDeleteModalVisible(true);
  }}
>
  Delete
</CDropdownItem>

注意：你的循环用了v-for="item in tableItems"，但渲染时写了rows.userID，这里要统一用item.userID，避免数据匹配错误

步骤3：在Users.js中渲染Modal组件 #

在表格的外部（比如组件末尾）添加Modal的JSX渲染，传入控制状态和回调函数：

// 表格代码结束后
<Modal
  visible={deleteModalVisible}
  setVisible={setDeleteModalVisible}
  onConfirm={handleConfirmDelete}
  userId={currentDeleteUserId}
/>

步骤4：更新Modal.js适配删除确认需求 #

修改Modal组件内容，替换为删除提示文本，并支持确认删除的回调：

import {
  CButton,
  CModal,
  CModalHeader,
  CModalTitle,
  CModalBody,
  CModalFooter,
} from "@coreui/react";

const Modal = ({ visible, setVisible, onConfirm, userId }) => {
  return (
    <>
      <CModal visible={visible} onClose={() => setVisible(false)}>
        <CModalHeader onClose={() => setVisible(false)}>
          <CModalTitle>确认删除用户</CModalTitle>
        </CModalHeader>
        <CModalBody>确定要删除ID为{userId}的用户吗？此操作不可撤销。</CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisible(false)}>
            取消
          </CButton>
          <CButton color="danger" onClick={onConfirm}>
            确认删除
          </CButton>
        </CModalFooter>
      </CModal>
    </>
  );
};

export default Modal;

关键说明 #

• React组件必须通过JSX渲染，不能直接调用函数触发显示，需通过visible状态属性控制显示/隐藏。
• 记录当前待删除用户ID，确保确认删除时能精准定位目标用户。
• 统一循环变量的使用，避免因变量名不一致导致的数据错误。

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