How add onMouseOver,onMouseEnter in reactjs?

Question

Here, i am using onMouseOver event in react but it not works fine for me. I use proper way how to use, call and set State. Here is my code anyone please help.

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>
                )
            }
        }

    }
}

Finally i edit my code and here is my whole code please find error and let me know.otherwise if you change in my code i am happy if it work. i read lots of article but can't work so please see what happen.

Answer 1

You will have to pass the function in different way, so that thisvariable correctly points to the component and this.setState works.

One of the way is givenbelow

<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>

I checked the code with following working example

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'));