代码之家 › 专栏 › 技术社区 › 4cody

反应中未触发的鼠标事件

reactjs javascript

4cody · 技术社区 · 6 年前

问题是我的鼠标事件都不会触发我的应答组件。如果我直接从道具调用该函数,它将启动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;

2 回复 | 直到 6 年前

Tholle 6 年前

你必须使用 onMouseEnter 给你的道具 Answer 组件,以便在鼠标进入 div 在里面 回答 .对于所有其他鼠标事件也是如此。

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

Mike Bell 6 年前

您的 Answer 组件需要将事件处理程序传递到基础HTML中,以便它们执行任何操作。所以 回答 组件可能看起来像:

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 因为你没有约束你的上下文。