未捕获的TypeError：无法读取未定义的属性'onMouseEnter'

Question

我想构建一系列下拉菜单，当鼠标悬停在它们上面时会打开。我正在使用React-Bootstrap进行Dropdown。我已经定义了一个函数并在我的构造函数中进行了设置。但它不会在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的一些例子