javascript - React useEffect 问题

Question

所以这是我似乎无法解决的问题。我有一个应用程序组件，在应用程序内部我已经呈现了显示组件。显示组件具有切换功能以及外部单击逻辑。在显示组件中，我有一个按钮，它根据他的 ID 删除一个项目，问题是当我单击按钮删除时。它删除了该项目，但它也关闭了显示组件，我不想要那个，我想要当我按下按钮时它会删除该项目但不关闭组件。谢谢

应用程序.js

const App =()=>{

   const[isShowlOpen, setIsShowOpen]=React.useState(false)

   const Show = useRef(null)

    function openShow(){
      setIsShowOpen(true)
    }
    function closeShowl(){
      setIsShowOpen(false)
    }


const handleShow =(e)=>{
      if(show.current&& !showl.current.contains(e.target)){
        closeShow() 
      }
    }
    useEffect(()=>{
        document.addEventListener('click',handleShow)
          return () =>{
           document.removeEventListener('click', handleShow)
          }   
      },[])
 return (
  <div>

  <div ref={show}>
    <img  className='taskbar__iconsRight'  onClick={() => 
     setIsShowOpen(!isShowOpen)} 
       src="https://winaero.com/blog/wp-content/uploads/2017/07/Control- 
        -icon.png"/>
          {isShowOpen ? <Show  closeShow={closeShow}  />: null}
   </div>
)
}

显示组件

import React, { useContext } from 'react'
import './Show.css'
import {  useGlobalContext } from '../../context'
import WindowsIcons from '../../WindowsIcons/WindowsIcons'
import { GrClose } from 'react-icons/gr'
const Show = ({closeShow}) => {
 
  const {remove, icons }= useGlobalContext()

  
  }
    return (
        <div className='control__Panel'>
          <div className='close__cont'>
          <GrClose className='close' onClick={closeShow} />
           <h3>Show</h3>
          </div>
          <div className='control__cont'>
          {icons.map((unin)=>{       
            const { name, img, id} = unin  
            return (             
             <li className='control' key ={id}>
               <div className='img__text'> 
               <img className='control__Img' src={img} />             
                <h4 className='control__name'>{name}</h4>
               </div>
                <button className='unin__button' onClick={() => remove(id)} >remove</button>                             
              </li> )
        
          })}
          
          </div>
              
        </div>
    )
}

export default Show

标签： javascriptreactjs

Answer 1

尝试停止传播功能，它应该停止点击事件的传播

<button 
  className='unin__button'
  onClick={(e) => {
   e.stopPropagation();
   remove(id);
  }}
>remove</button>