Question

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

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道具，以便在鼠标进入div中的Answer时调用它。其他所有鼠标事件也是如此。

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

Answer 2

您的Answer组件需要将事件处理程序传递到基础HTML中，以便它们执行任何操作。因此，Answer组件可能类似于：

import React from 'react';

import classes from './Answer.css';

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

export default answer;

您还有其他问题-您似乎将props.value与props.correct混淆了。您可能要考虑propType验证。按照目前的情况，如果您的处理程序尝试访问this，因为您尚未绑定上下文，它们也将无法按预期工作。

鼠标事件未触发反应

2 个答案: