反应中的切换菜单仅响应第一次单击

Question

我正在尝试在反应中制作一个切换菜单，菜单在第一次点击时打开，但在随后的点击中没有任何反应（它应该在第二次点击时关闭），但是在第一次点击之后它不再识别任何点击。

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>
 );
};

任何帮助，将不胜感激。

Answer 1

我在 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;