下拉菜单无法在React中设计

Question

import React, { Component } from 'react';
import axios from 'axios';
import DropdownMenu from './DropdownMenu';



class Navigation extends Component {

    state = {
      topCategory: []
    }

    componentDidMount() {
      axios.get('http://localhost:3030/topCategory')
        .then(res => {
          console.log(res.data.express.catalogGroupView);
          this.setState({
            topCategory: res.data.express.catalogGroupView
          })
        })
    }

  render() {

  const { topCategory } = this.state;
  const navList = topCategory.map(navList => {

    return (

        <DropdownMenu>
        <li key={navList.uniqueID}> <button onClick={this.showMenu}>{navList.name}</button></li>
        </DropdownMenu>
      )

  })

  return (
    <div>
    <ul className="header">{navList}</ul>
    </div>

  )

  }


  }

  export default Navigation;

import React, { Component } from 'react';



class DropdownMenu extends Component {

  constructor() {
    super();

    this.state = {
      showMenu: false,
    };

    this.showMenu = this.showMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  showMenu(event) {
    event.preventDefault();

    this.setState({ showMenu: true }, () => {
      document.addEventListener('click', this.closeMenu);
    });
  }

  closeMenu() {
    this.setState({ showMenu: false }, () => {
      document.removeEventListener('click', this.closeMenu);
    });
  }
  render() {

    return (
        <div>
        {
          this.state.showMenu
            ? (
              <div className="menu">
                <button> Menu item 1 </button>
                <button> Menu item 2 </button>
                <button> Menu item 3 </button>
              </div>
            )
            : (
              null
            )
        }
      </div>
    );
  }
}

export default DropdownMenu;

我是新手做出反应并在反应中创建了一个导航菜单。单击导航项时，应显示下拉列表。但在我的情况下，它不起作用，主要是下拉部分。有人请指导我这个。我尝试过很多方法，但似乎没有用。如果有人可以帮助或至少告诉我，我将非常感激

Answer 1

我在你的代码中看到了几个问题。

1. 在导航组件中，我看到onClick是this.showMenu，但没有绑定到该组件的此类函数。
2. 您可能需要阅读并理解状态和道具的工作原理。

希望下面的代码片段有所帮助。

class DropdownMenu extends React.Component {

  constructor() {
    super();

    this.state = {
    };   
  }

  
  render() {

    return (
        <div>
        {
          this.props.showMenu
            ? (
              <div className="menu">
                <button> Menu item 1 </button>
                <button> Menu item 2 </button>
                <button> Menu item 3 </button>
              </div>
            )
            : (
              null
            )
        }
      </div>
    );
  }
}

class Navigation extends React.Component {

    state = {
      topCategory: []
    }

    componentDidMount() {
    this.setState({
      topCategory: [{uniqueID:1000,name:'Nav Item 1'},{uniqueID:1001,name:'Nav Item 2'},{uniqueID:1002,name:'Nav Item 3'}]
    })
    }

  render() {

  const { topCategory } = this.state;
  const navList = topCategory.map(navListItem => {

    return (
            <li key={navListItem.uniqueID}> <button onClick={(e) => (this.setState({selected:e.target.innerText}))}>{navListItem.name}</button>
            <DropdownMenu showMenu={(()=>{
            
            return this.state.selected === navListItem.name})()}/></li>
      )

  })
  return (
    <div>
        <ul className="header">{navList}</ul>
    </div>

  )

  }


  }




ReactDOM.render(<Navigation />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>