没有从 eventlistner 回调中获得函数的预期参数

Question

我正在使用 功能性 React 组件，我试图在其中 添加事件 到 几个元素 一共。但是我无法将 trigger 元素传递给函数

export default function Header() {
    const background = document.querySelector('.dropdownBackground');
    const nav = document.querySelector('.top');

    useEffect(() => {
        let triggers = document.querySelectorAll('.cool > li');
        console.log(triggers);
        triggers.forEach(trigger => {
            trigger.addEventListener('mouseenter', trigger => handleEnter(trigger));
        });
    });

    function handleEnter(trigger) {
        // not getting proper value or trigger here. 
        // I am getting a MouseEvent object instead of a HTML element
        trigger.classList.add('trigger-active');
    }

    return (
        <nav className='header top w-100 justify-content-center'>
            <ul className='cool'>
                <li>
               {/* some HTML code */}
                </li>
            </ul>
        </nav>
    )
}

附录：更新了代码以提供所有必需的详细信息。

谢谢！！

Answer 1

变化：

triggers.forEach(trigger => {
    trigger.addEventListener('mouseenter', trigger =>
handleEnter(trigger));
});

至：

triggers.forEach(trigger => {
    trigger.addEventListener('mouseenter', event => // can also use () instead of 'event', as you are not using it
handleEnter(trigger));
});

如果您在箭头函数中使用 (trigger) 作为参数，则您将 trigger 命名为 MouseEvent，并将其传递给处理程序

没有从 eventlistner 回调中获得函数的预期参数

Not getting expected parameter on a function from an eventlistner callback

html

javascript

events

reactjs