Question

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

App.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

Answer 1

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

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

Answer 2

您的示例中有一些拼写错误。它们在您的代码中吗？如果是，您总是会在处理程序中遇到 closeShow() 情况，因为您使用了错误的参考。

const App =()=>{

   const[isShowOpen, setIsShowOpen]=React.useState(false) <<-- Here 'isShowlOpen'

   const show = useRef(null)  <<-- here 'S'how

    function openShow(){
      setIsShowOpen(true)
    }
    function closeShow(){  <<-- Here 'closeShowl'
      setIsShowOpen(false)
    }


const handleShow =(e)=>{
      if(show.current&& !show.current.contains(e.target)){ <<-- here 'showl'
        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>
)
}

反应 useEffect 问题

2 个答案: