Javascript 为什么React组件在渲染时启动onClick事件,而不是在单击时启动?
我有一个反应组件,如下所示:Javascript 为什么React组件在渲染时启动onClick事件,而不是在单击时启动?,javascript,reactjs,Javascript,Reactjs,我有一个反应组件,如下所示: import React, { Component, PropTypes } from 'react'; import SubnavActions from '../../actions/subnav-actions'; import FeedActions from '../../actions/feed-actions'; export default class SubnavItemModule extends Component { render()
import React, { Component, PropTypes } from 'react';
import SubnavActions from '../../actions/subnav-actions';
import FeedActions from '../../actions/feed-actions';
export default class SubnavItemModule extends Component {
render() {
return (
<div className={'item ' + this.props.active} thumbImg={this.props.thumbImg} _text={this.props._text} _id={this.props._id} onClick={this.handler}>
<p>{this.props._text}</p>
</div>
);
}
handler() {
console.log('subnav-filter-item-module handler launching');
}
};
import React,{Component,PropTypes}来自'React';
从“../../actions/subnav actions”导入子动画;
从“../../actions/feed actions”导入FeedActions;
导出默认类SubnavItemModule扩展组件{
render(){
返回(
{this.props._text}
);
}
handler(){
console.log('subnav-filter-item-modulehandler启动');
}
};
onClick{this.handler}以前是可以工作的,但现在它每次呈现组件时都会启动onClick事件
如果我点击它,什么也不会发生
在另一个演示中,我成功地使用了onClick={e=>this.handler(e)},但在这项工作中什么都没有发生
在这之前我就开始使用Babel6和Babelify了,但我真的不明白是什么原因造成的。早些时候,我使用了Reactify。因此,我的问题如下:
- 在这里启动onClick事件的正确方式是什么
- 为什么要在渲染上启动它
- 这与Babelify/Reactify有关吗?如果是,怎么做
如果你想知道为什么我要写不同的东西(使用导入而不是要求),我正在改变语法。如果你问为什么,我不知道。我只是试着跟随一些教程,看看其他人是怎么写的。我甚至不知道require和import之间的区别
而且,我刚刚意识到了一些事情。这可能是因为我没有在父级中作为道具传递任何函数吗有人对Rails应用程序有类似的问题,这是否提供了更多信息:在您的情况下,您调用了函数,但您需要传递到onClick函数的引用
onClick={ this.handler }
如果需要将一些参数传递给处理程序,可以使用.bind
,如下所示
onClick={ this.handler.bind(this, 100) }
handler(x) {}
或使用箭头功能
onClick={ () => this.handler(100) }