如何解决onClick 事件侦听器在 React 中无法正常工作
我的代码工作不正常,我不明白为什么..
const MenuPage = () => {
const [title,setTitle] = useState("");
function handleClick(e){
e.preventDefault();
setTitle(e.currentTarget.childNodes[0].innerText);
console.log(title);
}
return (
<div id="menus">
<div className="menus" onClick={(e) => handleClick(e)}>
<div className="menu-box" id="menu" name="" >
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#099FFF" className="tt-icon" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
</svg>
<span className="menuTitle">Menu option 1</span>
</div>
</div>
</div>
);
};
起初我以为 onClick 不起作用,但最终我发现它实际上起作用了并且 state 确实在改变,但是 console.log(title)
函数中的第二个语句 handleClick
是第一次点击时不加载,我需要点击两次,然后在控制台中加载 title
解决方法
useState
是异步的。您可以使用 useEffect
访问更新后的最新状态。
useEffect(() => { console.log(title)},[title])
上面的useEffect
只会在title
更新时被调用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。