为什么React组件在渲染时启动onClick事件,而不是在单击时启动
Why React component is launching onClick event on render, but not when clicked?
我有一个React组件,如下所示:
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');
}
};
onClick{this.handler}以前工作,但现在每次呈现组件时都会启动onClick事件。
如果我点击它,什么也不会发生。
在另一个演示中,我成功地使用了onClick={e=>this.handler(e)},但在这项工作中什么也没发生。
在这之前,我开始使用Babel 6和Babelify,但我真的不明白是什么原因造成的。早些时候我使用了Reactivity。所以我的问题如下:
- 在这里启动onClick活动的正确方式是什么
- 为什么它在渲染时启动
- 这与巴贝利菲/反应有关吗?如果是,如何
编辑:
更正了原始代码示例。
这是父模块:
http://pastebin.com/rSKf4wR8
如果你想知道我为什么要用不同的方式写作(使用import而不是require),我正在修改语法。如果你问为什么,我不知道。我只是试着遵循一些教程,看看其他人是怎么写的。我甚至不知道require和import之间的区别。
此外,我刚刚意识到了一些事情。这可能是因为我没有在父对象中作为道具传递任何函数吗?
有人在Rails应用程序中遇到了类似的问题,这是否提供了更多信息:当在条件表达式中使用道具时,React Rails应用程序没有执行onClick处理程序
在您的情况下,您使用call
函数,但需要传递给onClick
对函数的引用
onClick={ this.handler }
Example
如果您需要将一些参数传递给处理程序,您可以使用.bind
,比如这个
onClick={ this.handler.bind(this, 100) }
handler(x) {}
Example
或使用arrow function
onClick={ () => this.handler(100) }
相关文章:
- 单击按钮后启动javascript提示
- Javascript onclick事件在第一次单击时未启动
- 如何在ASP.NET中单击按钮后激活启动选项卡
- 如何在单击按钮时使用instantsearch.js启动搜索
- 一次点击,两次'单击'事件已启动
- 单击启动CSS导航活动类更改
- 如何:模拟在由 JavaScript 启动的 WebBrowser 警报/消息框中单击“确定”?(德尔福)
- 超链接单击未启动
- 如何防止Jquery colorbox组在单击或鼠标悬停时启动
- Jquery函数在单击时启动,但我需要停止它
- 当用户单击关闭浏览器时(但不是当用户单击刷新按钮时),JavaScript会确认启动
- 为什么首先单击文档空白处的任何位置启动代码,而不是单击超链接,以及为什么打开了太多选项卡
- 当标记单击未启动时的On Click事件.如何捕获事件
- Ajax-函数在没有调用或单击的情况下启动
- jQuery Mouseenter事件没有启动,它在单击时启动
- 画布项目未启动(或可单击)
- Radio onClick-将img src替换为title,直到第二次单击才启动
- 主干视图单击事件未启动
- 如何在单击链接时启动函数,然后从该链接传递类
- 在Internet Explorer中启动单击事件