javascript - 反应中的切换菜单仅响应第一次单击
问题描述
我正在尝试在反应中制作一个切换菜单,菜单在第一次点击时打开,但在随后的点击中没有任何反应(它应该在第二次点击时关闭),但是在第一次点击之后它不再识别任何点击。
const RightMenu = () => {
const [menuOpen, setMenuOpen] = useState(false);
const handleClick = e => {
const el = document.getElementById("menu");
if (menuOpen === false) {
el.style.display = "block";
setMenuOpen(true);
console.log("menu opened: ");
console.log(el);
}
if (menuOpen === true) {
el.style.display = "none";
setMenuOpen(false);
console.log("menu closed");
console.log(el);
}
};
return (
<div style={style ? style : ""}>
<div
className="text-center"
style={{
borderTopLeftRadius: "10px",
borderTopRightRadius: "10px",
cursor: "pointer",
display: "block"
}}
onClick={e => handleClick(e)}
> Toggle div
</div>
<div className="" id="menu" style={{ display: "none" }}>
menu to show
</div>
);
};
任何帮助,将不胜感激。
解决方案
我在 Repl 上试过你的代码,效果很好。
import React, {Component, useState } from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
const [menuOpen, setMenuOpen] = useState(false);
const handleClick = e => {
const el = document.getElementById("menu");
if (menuOpen === false) {
el.style.display = "block";
setMenuOpen(true);
console.log("menu opened: ");
console.log(el);
}
if (menuOpen === true) {
el.style.display = "none";
setMenuOpen(false);
console.log("menu closed");
console.log(el);
}
};
return ( < div >
< div className = "text-center"
style = {
{
borderTopLeftRadius: "10px",
borderTopRightRadius: "10px",
cursor: "pointer",
display: "block"
}
}
onClick = {
e => handleClick(e)
} >
Toggle div <
/div> < div className = "form-group" id = "menu" style = { { display: "none" } } > menu to show < /div> < /div>
);
};
export default App;
推荐阅读
- javascript - Vue:使用 vue-router 在视图之间访问数据
- html - 如何使用 CSS 制作滚动条间距/填充/边距
- mysql - 使用另一个表中的数据获取单个行的排名
- c++ - *adj 是什么意思以及它是如何工作的
- python - python无效的json格式
- angular7 - 如何在服务器端渲染中使用会话存储
- javascript - 如何在 mongodb 中获取和显示引用的数据?
- azure-functions - 为 Java 函数应用配置 Application Insights 代理
- php - 如何使用 preg_replace 在 php 中删除括号并将“空白”替换为“-”
- html - Power Automate Desktop - 选择器生成器:根据 HTML 属性选择 UI 元素