javascript - 如何在reactjs中添加onMouseOver、onMouseEnter？

Question

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

    }
}

最后我编辑了我的代码，这是我的整个代码，请找到错误并让我知道。否则，如果您更改我的代码，如果它有效，我很高兴。我读了很多文章，但无法工作，所以请看看会发生什么。

Answer 1

您必须以不同的方式传递函数，以便 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'));