单击删除按钮时如何打开模式？

Question

当用户单击删除客户端的按钮时，我正在尝试打开一个模式（显示您确定要删除客户端吗）。 要打开模式，我创建了一个openModal function，但不确定如何在此代码中调用此 function。

客户端列表.js

export default function ListClients() {
 const [showModal, setShowModal] = useState();
 const [userlist, setUserlist] = useState([]);
 const [selectedID,setSelectedID]=useState('');

   function deleteClient() {
   if(selectedID){
       const userParams = {
          clientName:
        clientName,
          country: country,
          clientid: selectedID,
        };
        
       axios
          .delete(process.env + "client", {
        data: clientParams,
          })
          .then((response) => {
        setClientlist(clientlist.filter((client) => client.id !== clientId));
          })
          .catch((error) => {
        console.log(error);
          });
   }



  }

return(
     <div>
    <tbody>
        {userlist.length > 0 ? (
           userlist.map((userlist) => (
             <tr key={userlist.id}>
                <td>
                  <div">
                      {userlist.id}
                   </div>
                </td>
                <td>
                  <button type="button" onClick={() => setSelectedID(userlist.id)}> 
                      Delete
                  </button>
                 </td
             </tr>
        </tbody>

         //the idea is to pass the  state for modal to show 
       <ModalDelete showModal={showModal} setShowModal={setShowModal} onCancel={()=>setSelectedID('')} onDel={deleteClient}/>
      </div>
);

ModalDelete.js

export default function ModalDelete({ showModal, setShowModal,onCancel,onDel }) {
 
return(
  <div>
    { showModal ? <Transition.Root show={showModal}>  
       <div>
       <p> Are you sure you want to delete the client?</p>
    </div>

    <div>
        <button type="button" onClick={onDel}>Yes</button>
            <button type="button" onClick={() => {
            setShowModal(false);
            onCancel();
            }} >
              Go Back
            </button>
          </div>
    </Transition.Root> : null }
  </div>
);
}

我如何在此代码中调用 function 以在单击已删除按钮时打开模式？

Answer 1

您只需在删除按钮上执行此操作（您不需要那个openModal ）：

 <button
  type="button" 
  onClick={() => {
    setSelectedID(userlist.id);
    setShowModal(true);
   }}
 >
  Delete
 </button>