making a tool tip, but i encounter this error: TypeError: Cannot read property 'handleMouseIn' of undefined

Question

我明白了，"TypeError: Cannot read property 'handleMouseIn' of undefined" 在我的 console.log 中，我不确定为什么会这样。我可以在

中没有 "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}>

making a tool tip, but i encounter this error: TypeError: Cannot read property 'handleMouseIn' of undefined

making a tool tip, but i encounter this error: TypeError: Cannot read property 'handleMouseIn' of undefined

javascript

reactjs

redux

react-redux