任何能够解释目标属性如何在此功能组件中使用的人

问题描述

基本上，我使用useEffect（反应性钩子）在div外部单击时启用了关闭菜单的功能。

我在网上找到了一个方法，但无法将目标用作clickHandler的属性。

我知道通过触发事件访问元素时event.target的工作原理，但是在这种情况下，我很难理解原因或原因。

很抱歉这个菜鸟问题，非常感谢您的帮助。

import React,{ useState,useEffect } from 'react';
import './Nav.css';
import { NavLink } from 'react-router-dom';

function Nav({id}) {

    const [hidden,sethidden] = useState(true);

    useEffect(() => {
        const clickHandler = ({target}) => {
            const container = document.getElementById(`container-${id}`);
            if (container.contains(target))
            return; sethidden(true);
        };

        document.addEventListener('click',clickHandler);
        return () => document.removeEventListener('click',clickHandler)
    });

    return (
        <div id={`container-${id}`}>
            {hidden ? null : 
            <nav >
                <ul className='nav-links'>
                    <NavLink to='/howItWorks' 
                        activeStyle={{
                            color: ' coral'
                        }}>
                        <li>How it works</li>
                    </NavLink>
                    <NavLink to='/drumMachine' 
                        activeStyle={{
                            color: '#6c8993'
                        }}>
                        <li>Live Drum Machine</li>
                    </NavLink>
                    <NavLink to='/howIMadeIt' 
                        activeStyle={{
                            color: '#39a3c6',height: '',}}>
                        <li>How I made it</li>
                    </NavLink>
                </ul>
            </nav>}

            <button onClick={() => sethidden(!hidden)}>{hidden ? 'Get started!' : 'Close'}</button>
            
        </div>  )
}

export default Nav;

解决方法

如果我理解您的问题，那么您想知道为什么{target}存在于clickHandler的参数中

它使用的是一种名为destructring的方法，它是在方法参数中直接从对象target中解构属性e。

  const clickHandler = ({target}) => {
            const container = document.getElementById(`container-${id}`);
            if (container.contains(target))
            return; sethidden(true);
        };

与

相同

  const clickHandler = (e) => {
            const {target} = e;
            const container = document.getElementById(`container-${id}`);
            if (container.contains(target))
            return; sethidden(true);
        };

与

相同

  const clickHandler = (e) => {
            const target = e.target;
            const container = document.getElementById(`container-${id}`);
            if (container.contains(target))
            return; sethidden(true);
        };