Question

我设法使这些按钮激活了一个下拉菜单，这些菜单在您单击关闭时便消失了，但是问题是，当您单击任何按钮时，所有的下拉菜单都会出现。似乎当我尝试设置一个按钮的状态时，它设置了所有按钮的状态。我希望每个按钮的状态都有一个true或false的displayMenu变量。单击按钮时，应将其displayMenu状态更改为true，而单击时应更改为false。我在这里做什么错了？

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './NavBar.css'; 
import './Body.css'
class NavBar extends Component {
  state = {
    displayMenu: false 
  }

  showDM = () => {
    const displayMenu = true;
    this.setState({ displayMenu }, () => {
      document.addEventListener('click', this.hideDM);
      //document.getElementById("ddc").classList.toggle('show');
    });
  }

  hideDM = (ev) => {
    this.setState({ displayMenu: false }, () => {
      document.removeEventListener('click', this.hideDM)
      //document.getElementsByClassName("dropdown-content").classList.remove('show');

    });
  }

  render() {
    return (
      <header>
        <div className="navbar">
          <div className="dropdown">
            <button onClick={this.showDM} className="dropbtn">About 
              <i className="fa fa-caret-down"></i>
            </button>
            { this.state.displayMenu ? ( 
            <div className="dropdown-content" id="ddc">
              <a href="#mission"><Link to="/mission">Mission</Link></a>
              <a href="#history"><Link to="/history">History</Link></a>
              <a href="#alumni"><Link to="/alumni">Alumni</Link></a>
            </div>
            ):
            ( 
              null 
            )
            }
          </div>
          <div className="dropdown">
            <button onClick={this.showDM} className="dropbtn">Academics 
              <i className="fa fa-caret-down"></i>
            </button>
            { this.state.displayMenu ? (
            <div className="dropdown-content" id="ddc">


              <a href="#curriculum"><Link to="/curriculum">Our Curriculum</Link></a>
              <a href="#study-abroad"><Link to="/study-abroad">Study Abroad</Link></a>
            </div>
            ):
            ( 
              null 
            )
            }
          </div> 

}
export default NavBar;

Answer 1

您检查多个按钮的相同值：this.state.displayMenu。我建议向您的状态添加另一个值并进行检查，例如displayWhich或其他任何值，然后根据单击的按钮进行设置。这样，您还可以删除再次隐藏菜单的功能：

我对结构进行了一些更改，我希望注释能够描述得足够多，否则，请随时提出来！

class NavBar extends Component {
  //added constructor for state and binding. you don't need to, but i like it better this way 
  constructor(){
    super();
    this.state =  {
      displayMenu: false, 
      displayWhich: -1
    }
    this.MenuClick = this.MenuClick.bind(this);
  }


  MenuClick(e) => {
    // i use a dom-attribute here, you could also use refs or something different. this is for breviety 
    let target = e.currentTarget.attr("data-which");
    //we assume that if the target is the same as displayWhich, displayMenu is also  true
    // but you could check for that too
    //also a soft check because dom returns string, but i wanted to use ints for the state
   // could also parse the target-value before and then do a hard check

    if(target == this.state.displayWhich){
       this.setState({
       displayMenu: false,
       displayWhich: -1
      })
    }else{
       this.setState({
       displayMenu: true,
       displayWhich:target
      })
    }        

  }



  render() {
    return (
      <header>
        <div className="navbar">
          <div className="dropdown">
            <button onClick={this.menuClick} className="dropbtn" data-which="1">About 
              <i className="fa fa-caret-down"></i>
            </button>
            { ((this.state.displayMenu) && (this.state.displayWhich==1))&&
             ( 
            <div className="dropdown-content" id="ddc">
              <a href="#mission"><Link to="/mission">Mission</Link></a>
              <a href="#history"><Link to="/history">History</Link></a>
              <a href="#alumni"><Link to="/alumni">Alumni</Link></a>
            </div>
            )}
          </div>
          <div className="dropdown">
            <button onClick={this.showDM} className="dropbtn">Academics 
              <i className="fa fa-caret-down"></i>
            </button>
            // CHANGED THIS HERE: 
            // content only displays when condition true, no need to return null
            // notice (condition) && (content)
            {  ((this.state.displayMenu) && (this.state.displayWhich==2)) &&
            (

            <div className="dropdown-content" id="ddc">


              <a href="#curriculum"><Link to="/curriculum">Our Curriculum</Link></a>
              <a href="#study-abroad"><Link to="/study-abroad">Study Abroad</Link></a>
            </div>
            )

            }
          </div> 

}
export default NavBar;

Answer 2

您可以为每个按钮发送不同类型的功能，并更改该按钮的状态。

<button onClick={this.showDM("About")} className="dropbtn">About 
    <i className="fa fa-caret-down"></i>
</button>

以及showDM功能

showDM = (type) => {
const displayMenu = true;
this.setState({ displayMenu: type });}

对于下拉内容，您可以检查其状态是否等于其自己的类型

{ this.state.displayMenu === "About" ? ( 
   <div className="dropdown-content" id="ddc">
     <a href="#mission"><Link to="/mission">Mission</Link></a>
     <a href="#history"><Link to="/history">History</Link></a>
     <a href="#alumni"><Link to="/alumni">Alumni</Link></a>
   </div>
   ):
   ( 
     null 
    )}

您的hideDM功能也可以像这样

hideDM = (ev) => {
this.setState({ displayMenu: ""});}

无法在导航栏中使下拉菜单中的下拉按钮在反应中单击

2 个答案: