如何在React中添加onMouseOver和onMouseEnter事件？

Question

如何在React中添加onMouseOver和onMouseEnter事件？

3

我在React中使用了onMouseOver事件，但是它对我来说并不起作用。我已经按照正确的方式使用、调用和设置了状态。以下是我的代码，请有人帮忙。

import React from 'react';

const style = {
    color:"black",
    fontSize:16,
    borderRadius:4,
    border: "1px solid grey",
    lineHeight: "28px",
    background: "white",
    padding: 3,
    margin:3,

  }


const highlightStyle = {
    color:"black",
    fontSize:16,
    border: "1px solid grey",
    background:"lightblue",
    borderRadius:4,
    lineHeight: "25px",
    padding: 3,
    margin:5
  }

export default class SplitSpansPreview extends React.Component {
    constructor(props){
        super(props)

        this.state = {    
            color_black: true,
            hover: false
        }

        this.changeColor = this.changeColor.bind(this)
        this.onHover = this.onHover.bind(this)
        this.hoverOn = this.hoverOn.bind(this)
        this.hoverOff = this.hoverOff.bind(this)
    }
    onHover() { alert("hello")
        this.setState({ hover: true });
    }
    hoverOn(){alert("hcek")
        // this.setState({ hover: true });
    }
    hoverOff(){ alert("kol")
        // this.setState({ hover: false });    
    }
    changeColor() {
        const id = this.props.atId;
        const self = this
        this.setState({color_black: !this.state.color_black}, () => {
            if(this.state.color_black){
                self.props.getDisselectedId(id);
            } else {
                self.props.getSelectedId(id);
            }
        });
    }

    createMarkup(data) {
        return {__html: data}
    }

    render(){
        let checkBreak = this.props.item.substring(0,4)
        if(checkBreak == '<br>' || checkBreak == ' <br') {
            const itemLength = this.props.item.length
            if(checkBreak == '<br>') {
                var item = this.props.item.substring(4,itemLength)
            } else {
                var item = this.props.item.substring(5,itemLength)
            }

            if(this.props.punctuation) {
                return(
                    <span>
                        <br/>      
                        <span id={this.props.atId}
                            className = {this.props.classword}
                            style={this.state.color_black ? style: highlightStyle}
                            onClick={this.changeColor}
                            onMouseOver={this.onHover}
                        >
                            {item}
                        </span>
                        <span className = {this.props.classword}>
                            {this.props.punctuation}
                        </span>
                    </span>
                )
            } else {
                return(
                    <span>
                        <br/>      
                        <span id={this.props.atId}
                            className = {this.props.classword}
                            style={this.state.color_black ? style: highlightStyle}
                            onClick={() => this.changeColor()}
                            onMouseEnter={() => this.hoverOn()} 
                            onMouseLeave={() => this.hoverOff()} 

                        >
                            {item}
                        </span>
                    </span>
                )
            }
        } else {
            if(this.props.punctuation) {
                return(
                    <span>           
                        <span id={this.props.atId}
                            className = {this.props.classword}
                            style={this.state.color_black ? style: highlightStyle}
                            onClick={this.changeColor}
                        >
                            {this.props.item}
                        </span>
                        <span className = {this.props.classword}>
                            {this.props.punctuation}
                        </span>
                    </span>
                )
            } else {
                return(           
                    <span id={this.props.atId}
                        className = {this.props.classword}
                        style={this.state.color_black ? style: highlightStyle}
                        onClick={this.changeColor}
                    >
                        {this.props.item}
                    </span>
                )
            }
        }

    }
}

最终我编辑了我的代码，以下是整个代码，请找出错误并让我知道。如果您更改了我的代码并且它可以工作，我会很高兴。我阅读了很多文章，但无法使其工作，所以请看看发生了什么。

- stackoverhelp

你得到了什么错误？ - Chris

在鼠标进入事件中，我放置了一个警告框以调用该函数，但警告框没有弹出。 - stackoverhelp

1

你在构造函数中绑定了 hoverOn 和 hoverOff 吗？ - Hemerson Carlin

可能是重复的问题：Uncaught TypeError: Cannot read property 'state or props' of undefined。 - Shubham Khatri

是的，我正在绑定函数。 - stackoverhelp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shrey Kejriwal · Accepted Answer

您需要以不同的方式传递函数，以便this变量正确指向组件并且this.setState正常工作。

以下是一种方法：

<span id={this.props.atId}
   className = {this.props.classword}
   style={this.state.color_black ? style: highlightStyle}
   onClick={() => this.changeColor()}
   onMouseEnter={() => this.hoverOn()} 
   onMouseLeave={() => this.hoverOff()} 
>
   {item}
</span>

我使用以下工作示例检查了代码。

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      message: ""
    };
  }
  onMouseEnter() {
    this.setState({message: 'Mouse Enter'})
  }

  onMouseLeave() {
    this.setState({message: 'Mouse Leave'})
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p onMouseEnter={() => this.onMouseEnter()} onMouseLeave={() => this.onMouseLeave()}>
          Hover here!
        </p>
        <span>{this.state.message}</span>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));