如何将删除按钮的id传递给弹出的删除按钮

Question

我在前端应用程序中有一个表，其中每一行代表一个项目，对于每一行，您都有一个“删除”按钮，单击时会触发警告弹出窗口。在此弹出窗口中，您要传递项目的 ID，因此如果用户确认删除，您可以从后端的表中删除相应的项目。

    import axios from "axios";
    import { useEffect, useState } from "react"
    import styles from '../../styles/Home.module.css'
    
    
    const List = () => {
        const [rowData, setRowData] = useState([]);
    
        useEffect(() => {
            axios.get('/api/institute/instituteInfo')
            .then((response) => {
                setRowData(response.data);
                })
        }, [])
    
        const popupBox = (id) => {
          document.getElementById('deleteBox').style.display='block';
        }
    
        const closePopupBox = () => {
          document.getElementById('deleteBox').style.display='none';
        }
       
        const softDelete = () => {
          axios.delete(`/api/institute/instituteInfo/${id}`)
          .then(() => {
          getData();
      })
        }

    return (




      
    <div className="flex flex-col relative">
    <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
    <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
    <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
    <table className="min-w-full divide-y divide-gray-200">
    <thead className="bg-gray-50">
    <tr>
    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
     Institute Name
     </th>
     <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
     Domain or Subdomain
     </th>
     <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
     No. of Users
     </th>
     </tr>
     </thead>
     <tbody className="bg-white divide-y divide-gray-200">
     {rowData.map((data => {
     return (
     <tr key={data._id}>
     <td className="px-6 py-4 whitespace-nowrap">
     <div className="flex items-center">
                              
     <div className="ml-4">
     <div className="text-base font-medium text-gray-900">
     {data.institute_name}
     </div>
     <div className="text-sm text-gray-500">
     {data.institute_address}
     </div>
                                
     <div className="text-sm text-blue mt-1">
     {data.institute_email}
     </div>
     <div className="text-sm text-gray-500">
     {data.institute_phone}
     </div>
     </div>
     </div>
     </td>
     <td className="px-6 py-4 whitespace-nowrap">
     <div className="text-xs text-gray-900">Domain</div>
     <div className="text-bs text-gray-500">{data.institute_subdomain}</div>
                            
     <div className="text-xs text-gray-900 mt-1">Sub-Domain</div>
     <div className="text-bs text-gray-500">{data.institute_subdomain}</div>
     </td>
                          
     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
     Admin
     </td>
     <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
     <div className="flex flex-col">
     <button className='border-2 border-color: border-blue-700 text-blue-dark w-28 h-8 mt-6 rounded' 
     type='submit'>Edit</button>
     <button className='border-2 border-color: border-gray-300 w-28 h-8 mt-1 rounded' 
     type='submit' onClick={() => popupBox(data._id)} >Remove</button>
     <button className='border-b-2 border-color: border-gray-500 w-28 h-8 mt-1 rounded' 
     type='submit'>Add to Blacklist</button>
     </div>
     </td>
     </tr>
     )}))}
     </tbody>
     </table>
                     
     </div>
     </div>
     </div>
     div className={styles.manage}>
     <div id="deleteBox" className='w-11/12 pl-9 hidden'>
     <h1 className='mt-4 font-bold text-lg'>Delete the institute?</h1>
     <p className='text-sm'>You'll lose all contacted data. We can't recover them once you delete.</p>
     <div>
     <textarea id="reasonToDelete" name="reasonToDelete" rows="4" cols="50" 
     className='border-2 border-color: border-gray-300 rounded p-2 mt-4' placeholder="Write the reason to delete"></textarea>
      </div>
       <div  className='mb-10'>
       <button className='border-2 border-color: border-gray-300 w-28 h-8 mt-1 rounded'
       onClick={() => closePopupBox()}>Cancel</button>
       <button className='bg-red-color text-gray-light bg-opacity-75 font-normal w-28 h-8 mt-1 ml-1 rounded' 
       onClick={() => softDelete()}>Yes, delete it</button>
       </div>
       </div>    
       </div>             
     </div>
            
)
 }
    

导出默认列表；

      //Home.module.css
.manage {
    margin-top: -64rem;
    margin-left: 50rem;
    background-color: white;

}

Answer 1

您可以在这里使用状态，

在弹出窗口打开时设置模态 ID，在删除按钮调用时传递状态。

const [modalId, setModalId] = useState("");

当模态关闭时，将状态重置为默认值。

Answer 2

嘿兄弟，首先使用 React 忘记了直接操作 DOM，实际上你应该做的是使用 REFS 来发出 POPUP 警报，尝试找到一个 youtube 视频解释如何在 React 中实现模态，其次当你有一个 refs 到你的modal 它与 document.getElementByID("deleteBox") 相同“但以反应方式”现在获取该 ID 非常简单，您应该做的是： 每当您打开该模式（弹出窗口）时，请检查 Ref 中的父级并在 const 中获取它的 ID，例如并将其转发到 axios 中的链接。