Javascript 如何在reactjs中添加onMouseOver、onMouseEnter？

在这里，我在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>
                )
            }
        }

    }
}

从“React”导入React；
常量样式={
颜色：“黑色”，
尺寸：16，
边界半径：4，
边框：“1px纯灰”，
线宽：“28px”，
背景：“白色”，
填充：3，
差额：3，
}
常量高亮样式={
颜色：“黑色”，
尺寸：16，
边框：“1px纯灰”，
背景：“浅蓝色”，
边界半径：4，
线宽：“25px”，
填充：3，
保证金：5
}
导出默认类SplitSpansPreview扩展React.Component{
建造师（道具）{
超级（道具）
this.state={
黑色：真的，
悬停：错误
}
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\u black:！this.state.color\u black}，（）=>{
如果（此.state.color\u黑色）{
self.props.getDisselectedId（id）；
}否则{
self.props.getSelectedId（id）；
}
});
}
createMarkup（数据）{
返回{uuuuhtml:data}
}
render（）{
设checkBreak=this.props.item.substring（0,4）
如果（checkBreak='
'| | checkBreak=='您必须以不同的方式传递函数，以便
此变量正确指向组件，并且
此.setState
工作

其中一个方法是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>

this.changeColor（）}
onMouseCenter={（）=>this.hoverOn（）}
onMouseLeave={（）=>this.hoverOff（）}
>
{item}

我用下面的工作示例检查了代码

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

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：'反应'，
信息：“
};
}
onMouseEnter（）{
this.setState（{message:'Mouse Enter'}）
}
请假{
this.setState（{消息：'鼠标离开'}）
}
render（）{
返回(
this.onmouseinter（）}onMouseLeave={（）=>this.onMouseLeave（）}>
停在这里！

{this.state.message}
);
}
}
render（，document.getElementById（'root'））；
您会遇到什么错误？OnMouseCenter事件未调用我对该函数发出警报，但警报不会弹出。您是否在构造函数中绑定
hoverOn
和
hoverOff
？可能重复是的我绑定了函数当我在changeColor函数的onclick函数中使用警报时，该函数不工作。但当我使用在OnMouseCenter和OnMouseLeave中发出警报。事实上，我认为鼠标事件不起作用。在react鼠标事件中使用这种方法正确吗？谢谢！现在我更新了我的代码，请查看，如果发现一些错误，请更新我的代码。请解决它。我们将感谢您的帮助。