React函数式组件中点击Div触发Edit组件弹窗的问题求助

• 核心问题：你的editpage函数直接返回<Edit />组件，这在React中不会触发组件渲染——React需要通过状态（State）来控制组件的显示与隐藏，而非直接在函数中返回组件。

• 修复步骤：

  1. 在Add.js中引入useState，添加控制弹窗显示的状态和存储选中ID的状态：

     import { useState } from 'react';
     import Edit from './Edit'; // 确保组件路径正确
     
     function Add() {
       const [isEditModalOpen, setIsEditModalOpen] = useState(false);
       const [currentEditId, setCurrentEditId] = useState(null);
     
       // 你的其他现有代码...
     }
     

  2. 修改editpage函数，改为通过状态触发弹窗显示：

     const editpage = (id) => {
       setCurrentEditId(id);
       setIsEditModalOpen(true);
     };
     

  3. 在Add.js的JSX结构中，添加Edit组件的渲染逻辑，用状态控制其显示：

     // 放在页面根元素末尾等合适位置
     {isEditModalOpen && (
       <Edit 
         id={currentEditId} 
         onClose={() => setIsEditModalOpen(false)} 
       />
     )}
     

  4. 调整Edit组件，使其支持通过外部props控制弹窗显示：
     假设Edit组件原本用内部状态控制弹窗，现在改为接收visible和onClose props：

     // Edit.js示例代码
     function Edit({ id, visible, onClose }) {
       return (
         visible && (
           <div className="edit-modal">
             {/* 弹窗内的表单内容，使用传入的id获取对应数据 */}
             <button onClick={onClose}>关闭弹窗</button>
           </div>
         )
       );
     }
     

• 额外检查：确保你的目标div没有被其他元素遮挡，也没有设置pointer-events: none这类CSS属性阻止点击事件触发。

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