如何将 id 从删除按钮传递到弹出删除按钮

Posted 2023-03-07

【中文标题】如何将 id 从删除按钮传递到弹出删除按钮

【英文标题】：how to pass the id from delete button to the popup delete button

【发布时间】：2021-11-03 13:56:51

【问题描述】：

我正在从后端获取表格形式的数据。此表显示带有删除和编辑按钮的列表，当我单击删除按钮（出现警告弹出框）时，唯一的问题是在弹出框上我想将 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;

【问题讨论】：

我很确定getElementById 在 React 应用程序中没有任何作用，.style.display='none' 也不是你在 React 中隐藏元素的方式......

@JeremyThille 我是新手。如果你能告诉我该怎么做，我会解决这个问题

你能显示List组件的剩余代码吗？

【参考方案1】：

你可以在这里使用状态，

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

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

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

【参考方案2】：

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