javascript - 鼠标事件未在 react 中触发

Question

问题是我的应答组件上没有触发任何鼠标事件。如果我直接从 prop 调用该函数，它将触发 ie

onMouseEnter={this.hoverEnter()}

但是当我刚刚传递引用时什么也没有触发

onMouseEnter={this.hoverEnter} 

我不确定为什么没有任何东西触发。

我的逻辑有问题吗？是不是连接不正确？

class GameStage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            currentCount: 3,
            showStartButton: true,
            commence: false,
            level: 1,
            question: null,
            answerSet: {
                a1: null,
                a2: null,
                a3: null,
                a4: null
            }
        }
        this.startGame = this.startGame.bind(this);
        this.hoverEnter = this.hoverEnter.bind(this);
        this.hoverLeave = this.hoverLeave.bind(this);
    }

    startGame() {
        this.setState({showStartButton: false, commence: true});
        console.log(this.state.answerSet)
    }

    clickHandle () {
        console.log("clicked")
    }

    hoverEnter () {
        console.log("mouse enter")
    }

    hoverLeave () {
        console.log("mouse leave")
    }

    render() {
        return(
            <div className={classes.GameStage}>
                {this.state.commence ?
                    <div className={classes.AnswerContainer}>
                        <Answer 
                            onClick={this.clickHandle}
                            onMouseOver={this.hoverEnter} 
                            onMouseLeave={this.hoverLeave} 
                            correct={false}>
                            {this.state.answerSet.a1}
                        </Answer>
                        <Answer 
                            correct={false}>
                            {this.state.answerSet.a2}
                        </Answer>
                        <Answer correct={false}>{this.state.answerSet.a3}</Answer>
                        <Answer correct={false}>{this.state.answerSet.a4}</Answer>
                    </div>
                : null }
            </div>
        )
    }
}

export default GameStage;

这是答案部分

import React from 'react';

import classes from './Answer.css';

const answer = (props) => (
    <div className={classes.Answer} correct={props.value}>{props.children}</div>
)

export default answer;

Answer 1

您必须使用onMouseEnter给你的Answer的 Prop 组件，以便当鼠标进入 div 时调用它在Answer 。对于所有其他鼠标事件也是如此。

const Answer = (props) => (
  <div
    className={classes.Answer}
    correct={props.value}
    onMouseEnter={props.onMouseEnter}
  >
    {props.children}
  </div>
)