Uncaught TypeError: Невозможно прочитать свойство 'onMouseEnter' из неопределенного

Question

Я хотел бы создать серию выпадающих меню, которые будут открываться при наведении на них курсора мыши.Я использую React-Bootstrap для выпадающего списка.Я определил функцию и настроил ее в своем конструкторе.Но он не будет отображаться в Chrome, сообщая, что моя функция onMouseEnter не определена.Что я упускаю, что заставляет это случиться?Я думаю, что я следую основным рекомендациям React, но не могу понять, что я пропустил.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./Menu.css";
import Dropdown from '../../../../../node_modules/react-bootstrap/Dropdown';

class Menu extends Component {  

 constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
    this.state = {
      dropdownOpen: false
    };

    this.tempData = this.tempData.bind(this);
 } 

  toggle() {
    this.setState(prevState => ({
      dropdownOpen: !prevState.dropdownOpen
    }));
  }

  onMouseEnter() {
    this.setState({dropdownOpen: true});
  }

  onMouseLeave() {
    this.setState({dropdownOpen: false});
  }


 tempData(){return ...}


 MakeDropdowns(data) {
    let CreateSubs = function(props){
         let set = props.props;
         let val=[];

         for(var j=0;j<set.length;j++){
            val.push(<Dropdown.Item href={set[j].link} key={set[j].name +" " + j}>{set[j].name}</Dropdown.Item>)
        }

        return val;
    }

    let list = [];
    for(var i=0;i<data.data.length;i++){
        let val = data.data[i];
        list.push(
            <li id="MenuBodyLI" key={val.name+ " " + i}>
                <Dropdown onMouseOver={this.onMouseEnter} onMouseLeave={this.onMouseLeave} isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                  <Dropdown.Toggle variant="secondary" size="sm" id="dropdown-basic">
                  {val.name}
                  </Dropdown.Toggle>
                  <Dropdown.Menu>
                    <CreateSubs props={val.subtitles}/>
                  </Dropdown.Menu>
                </Dropdown>             
            </li>
        );
    }

    return list;    
  }

  render() {
    const val = this.tempData();

    return (
        <div className="MenuBody">          
            <ul id="MenuBodyUL">
                <this.MakeDropdowns data={val}/>
            </ul>
        </div>
    );
  }
}
export default Menu;

const wrapper = document.getElementById("create-menu");
wrapper ? ReactDOM.render(<Menu />, wrapper) : false;

Answer 1

Попробуйте связать ваш MakeDropdowns так же, как, например, onMouseEnter

Также, если MakeDropdowns - это метод класса, который должен создавать и возвращать элементы JSX, вы должны сделать это подобно:

return (
  <div className="MenuBody">          
    <ul id="MenuBodyUL">
      {this.MakeDropdowns(this.data)} // Do not start your methods with capital letter
    </ul>
  </div>
);

Некоторые примеры вы можете найти здесь https://reactjs.org/docs/lists-and-keys.html#embedding-map-in-jsx