javascript - 我如何实现 e.preventDefault();在使用效果?

我有一个问题问你。我想添加 e.preventDefault();在 useEffect 中,以便在状态更改为 true 时立即调用它。但是有些东西不起作用,有人可以告诉我如何实现这个方法。

const [active, setActive] = useState(false);
 useEffect((e) => {
    if (active === true) {
        e.preventDefault();
    }
}, [active])



<ul
    onClick={() => setBurger(false)}
    <className="nav__ul">
    <li><Link to='/homeWork'>Таблица</Link></li>
    <li><a href="#photo__h2">Галерея</a></li>
    <li><a href="#questions__head">Питання-відповідь </a></li>
    <li><a href="#contacts__h3">Контакти</a></li>
    <li onClick={() => setActive(true)}><a href="/" className="popup_open">Забронювати</a></li>
</ul>

回答1

您无权访问 useEffect 中的事件实例。它可以在 onClick 回调中访问,而不是内部效果。

const onClick = useCallback((e) => {
  setActive(true)
  e.preventDefault()
})

...
<li onClick={onClick} ...

始终使用 useCallback() 包装回调通常也是一个好主意——这样你的回调就不需要在每次渲染时重新连接——因为在每次渲染时你都会生成新的闭包。

如果你不使用 'useCallback()' 包装你的回调,在幕后 react 将在每个渲染上替换事件处理程序,类似于:

element.removeEventListener('click', oldClosure)
element.addEventListener('click', newClosure)

另外,我不确定,但是查看您的代码,我想您可能希望将 onClick 放在 <a> 元素上而不是 <li>

相似文章

javascript - 拖放时交换元素

我在Wordpress中工作,我正在努力做到这一点,所以当一个可拖动的部分放在另一块的位置时,它们会交换位置,但是每次我放下一块时,什么都没有发生。下面是CSS部分,JS部分和htmlpart.Eac...

最新文章