制作工具提示，但我遇到此错误：类型错误：无法读取未定义的属性'handleMouseIn'

Question

我在console.log中得到这样的消息，"TypeError:无法读取未定义的属性'handleMouseIn'"，我不确定为什么会发生这种情况。我可以在

中没有"onMouseOver={this.handleMouseIn} onMouseOut={this.handleMouseOut}"的情况下正确渲染组件

import React, { Component } from 'react';
import { connect } from 'react-redux'
import Radium, { Style, StyleRoot } from 'radium';
import ToolTip from './ToolTipComponent'
let pageStyle = {
  base: {
    "background-color": "teal",
    "width": "50px",
    "display": "inline-block",
    "float": "left",
    "height": "100%",
    "margin" : "5px"
  },
  bodyTest: {
    "padding-top": "30px"
  }
}

class BodyText extends Component {
  constructor(props){
    super(props)
    this.state = {
      listItem: ['Search', 'Following', 'Browse', 'Friends']
    }
    console.log("bodyTest : ", this.state.listItem)
  }

  render() {
    return (
      <div>
        <div style={pageStyle.bodyTest}>
          <ToolTip listItems={this.state.listItem}/>
        </div>
      </div>
    )
  }
}

我的组件，用于呈现列表项。

import React, { Component } from 'react';
import Radium, { Style, StyleRoot } from 'radium';
let componentStyle = {
  listClass: {
    "list-style-type": "none",
    "margin": "0",
    "padding": "0"
  }
};
class ToolTip extends Component {
  constructor(props) {
      super(props)
      this.state = {
        hover: false,
        listItems: []
      }
      this.handleMouseIn = this.handleMouseIn.bind(this);
      this.handleMouseOut = this.handleMouseOut.bind(this);
    }
    handleMouseIn() {
      this.setState({ hover: true })
    }
    handleMouseOut() {
      this.setState({ hover: false })
    }
    render() {
      const tooltipStyle = {
        display: this.state.hover ? 'block' : 'none'
      }
      let itemListNodes = this.props.listItems.map(function(item){
          return <div><li onMouseOver={this.handleMouseIn} onMouseOut={this.handleMouseOut}>{item}</li><div class={tooltipStyle}>{item}</div></div>
      })
      return (
        <div>
          <ul style={componentStyle.listClass}>{itemListNodes}</ul>
        </div>
      );
    }
}
export default ToolTip;

Answer 1

问题的原因是在.map中使用this.没有得到您想要的结果。您需要做的是提供this作为.map的第二个参数，如下所示：

let itemListNodes = this.props.listItems.map(function(item){
  return <div><li onMouseOver={this.handleMouseIn} onMouseOut={this.handleMouseOut}>{item}</li><div style={tooltipStyle}>{item}</div></div>
  }, this)

此外，您需要将<div class={tooltipStyle}>更改为<div style={tooltipStyle}>