Question

我想在鼠标移过#include<gl/glut.h> #include<stdio.h> GLfloat vertices[][3]={ {0.0,0.0,0.0},{0.0,0.4,0.0},{0.4,0.4,0.0},{0.4,0.0,0.0} }; GLfloat color[2][3]={ {1.0,0.0,0.0},{0.0,1.0,0.0}}; void board() { glColor3f(0.0,0.0,1.0); glBegin(GL_LINE_LOOP); glVertex3f(-0.8,-0.8,0.0); glVertex3f(-0.8,0.80,0.0); glVertex3f(0.80,0.80,0.0); glVertex3f(0.8,-0.80,0.0); glEnd(); } void cube() { glBegin(GL_LINE_LOOP); glColor3f(1.0,0.0,0.0); glVertex3fv(vertices[0]); glVertex3fv(vertices[1]); glVertex3fv(vertices[2]); glVertex3fv(vertices[3]); glEnd(); } void display() { glClearColor(1.0,1.0,1.0,1.0); glViewport(0,0,600,600); glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT); cube(); board(); glFlush(); } void mykey(int key,int x,int y) { switch(key){ case GLUT_KEY_LEFT: glTranslatef(-0.4,0.0,0.0); break; case GLUT_KEY_RIGHT: glTranslatef(0.4,0.0,0.0); break; case GLUT_KEY_UP: glTranslatef(0.0,0.4,0.0); break; case GLUT_KEY_DOWN: glTranslatef(0.0,-0.3,0.0); break; } glutPostRedisplay(); } void myinit() { glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0,200,0,400,-1,1); glMatrixMode(GL_MODELVIEW); } int main(int argc,char **argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB|GLUT_DEPTH); glutInitWindowSize(600,600); glutCreateWindow("hello"); glutDisplayFunc(display); glutSpecialFunc(mykey); glutMainLoop(); return 0; }时触发事件我使用div作为我的前端框架，并且在他们的docs之后，事件不会被激活。

React

当页面加载时，我在控制台中看到来自onMouseOver和onMouseOut的日志输出，但当我将鼠标移到元素（<div onMouseOver={console.log('onMouseOver')} onMouseOut={console.log('onMouseOut')} className="hidden-xs text-center"> {productImage} {productContent} </div>）上时，没有其他内容被写入。

Answer 1

您应该分配方法的引用，而不是在事件寄存器中调用它们。试试这个：

handleOnMouseOver: function(e){
  console.log("onMouseOver");
}
....
<div onMouseOver={this.handleOnMouseOver} ..../> // NOTE : don't put () at the end

Answer 2

为进一步回答Phil的问题-在安装组件时，将评估放在括号{}中的任何内容。如果您输入

onMouseOver={console.log("onMouseOver")}

然后在安装组件时，React通过执行返回console.log()的{{1}}来评估表达式，因此将处理程序设置为undefined。

如果你放

undefined

表达式的计算结果是对处理程序的引用，因此您可以获得所需的内容。您也可以使用

onMouseOver={this.handleOnMouseOver}

反应onMouseOver并不会触发

2 个答案: