Javascript onClick不工作

我试图在用户单击div时调用函数（在react中使用onClick）。我现在不需要传递任何参数，只需要调用函数。我对react.js还不太熟悉，所以提前为我的无知道歉。谢谢

var Test = React.createClass({

btnTapped: function(){
    console.log('tapped!');
},
render: function() {
    var stationComponents = this.props.stations.map(function(station, index) {

    return <div onClick={btnTapped()}><img src="img/test.png" />{station}</div>;

    });
    return <div>{stationComponents}</div>;
   }
});

var cards = ["amazon", "aeo", "aerie", "barnes", "bloomingdales", "bbw","bestbuy", "regal", "cvs", "ebay", "gyft", "itunes", "jcp", "panera", "staples", "walmart", "target", "sephora", "walgreens", "starbucks"];

ReactDOM.render(<Test stations={cards} />, document.getElementById('test-div'));

var Test=React.createClass({
btntaped:function（）{
console.log（'tapped！'）；
},
render:function（）{
var stationComponents=this.props.stations.map（函数（站，索引）{
返回{站}；
});
返回{stationComponents}；
}
});
var卡=[“亚马逊”、“aeo”、“艾利”、“巴恩斯”、“布鲁明代尔”、“bbw”、“百思买”、“富豪”、“cvs”、“易趣”、“gyft”、“itunes”、“jcp”、“panera”、“斯台普斯”、“沃尔玛”、“target”、“丝芙兰”、“沃尔格林”、“星巴克”]；
ReactDOM.render（，document.getElementById（'test-div'）；

在函数之前，您错过了

这个

关键字。您还必须提供函数，但不能调用它

更新：

您错过了在map回调函数中重新定义此

使用箭头功能

this.props.stations.map((station, index) => {
  return <div onClick={this.btnTapped}><img src="img/test.png" />{station}</div>;
});

this.props.stations.map（（站，索引）=>{
返回{站}；
});

或者将上下文绑定到函数

this.props.stations.map(function (station, index) {
  return <div onClick={this.btnTapped}><img src="img/test.png" />{station}</div>;
}.bind(this));

this.props.stations.map（函数（站、索引）{
返回{站}；
}.约束（这个）；

您应该将函数设置为

onClick

属性，而不是调用它。 应该是：

onClick={this.btnTapped}

而不是

onClick={btnTapped（）}

此外，也可以这样做：

<div 
  onClick={function(e) {
    this.btnTapped(); //can pass arguments this.btnTapped(foo, bar);          
  }}
 >

---

如果构建系统支持babel，请在react代码中使用ES6箭头函数

如果使用ES6类创建组件，请在构造函数级别使用方法绑定，以避免在每次渲染调用时绑定，并在map函数中提供div标记的键

类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
this.btntaped=此
.b未标记
.约束（本）；
}
btnTapped（）{
console.log（'tapped'）；
}
render（）{
返回(
{这个
.道具
.车站
.map（（站点、索引）=>{
返回{station}
})
}
)
}
}
var卡=[“亚马逊”、“aeo”、“艾利”、“巴恩斯”、“布鲁明代尔”、“bbw”、“百思买”、“富豪”、“cvs”、“易趣”、“gyft”、“itunes”、“jcp”、“panera”、“斯台普斯”、“沃尔玛”、“target”、“丝芙兰”、“沃尔格林”、“星巴克”]；
ReactDOM.render(
，document.getElementById（'test-div'）
每当您想在render方法中使用函数时，首先需要在构造函数中绑定这些方法。还有一件事是，当您不想向需要调用的方法传递任何参数时，请使用this
onClick={this.btnTapped}
而不是
onClick={this.btnTapped（）}
。多谢各位

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

export default class Test extends Component {
constructor (props) {
    super(props);
//set cards value in state then you don't need to use props...
    this.state = {
        cards: ["amazon", "aeo", "aerie", "barnes", "bloomingdales", 
        "bbw","bestbuy", "regal", "cvs", "ebay", "gyft", "itunes", 
        "jcp", "panera", "staples", "walmart", "target", "sephora", 
        "walgreens", "starbucks"]
    }
    this.btnTapped = this.btnTapped.bind(this);
    // bind all the methods which you're using the "this.state" inside it....
}

btnTapped (card) {
    console.log("Coming here:::" + card)
}

render() {
    var cards = this.state.cards
    return (
        <div>
            {/* if you don't want to pass an arguments use this... */}
            {
                cards.map((card, i) => 
                    <button key = {i} onClick = {this.btnTapped}>{card}</button>
                )
            }
            {/* if you want to pass arguments use this  */}
            {
                cards.map((card, i) =>
                    <button key = {i} onClick = {(e) => this.btnTapped(card)}>{card}</button>
                )
            }
        </div>
    );
}
}
ReactDOM.render(<Test />, document.getElementById('test-div'));

import React，{Component}来自'React'；
从“react dom”导入react dom；
导出默认类测试扩展组件{
建造师（道具）{
超级（道具）；
//在状态中设置卡的值，然后你就不需要使用道具了。。。
此.state={
卡片：[“亚马逊”、“aeo”、“艾利”、“巴恩斯”、“布鲁明代尔”，
“bbw”、“百思买”、“富豪”、“cvs”、“易趣”、“gyft”、“itunes”，
“jcp”、“panera”、“staples”、“沃尔玛”、“target”、“丝芙兰”，
“沃尔格林”、“星巴克”]
}
this.btnTapped=this.btnTapped.bind（this）；
//绑定您正在使用的所有方法，其中包含“this.state”。。。。
}
B带标签（卡）{
log（“来到这里：：”+卡）
}
render（）{
var cards=this.state.cards
返回(
{/*如果不想传递参数，请使用此…*/}
{
卡片。地图（（卡片，i）=>
{card}
)
}
{/*如果要传递参数，请使用此*/}
{
卡片。地图（（卡片，i）=>
这个.btntaped（card）}>{card}
)
}
);
}
}
ReactDOM.render（，document.getElementById（'test-div'）；
注意：不是专家：）

我现在正在探索reactjs，从16.3.1版开始，arrow函数对我起作用

<button
    onClick={() => { console.log("button clicked");}}>
    button  
</button>

{console.log（“单击按钮”）；}>
按钮
如果有人的问题没有通过此线程的答案得到解决，那么我只需给他2美分。我面临着类似的问题，调试后，我发现我的按钮的“z-index”为-9999，因此它位于一个层后面，因此点击没有到达它。我将z-index更改为正值1，点击被捕获。
对于那些面临此问题的人，它也可能是由于某些CSS问题而发生的

对我来说，它通过删除名为“指针事件”的CSS属性来工作。在我的CSS中，它被设置为“无”。i、 e


指针事件：无
try with:onClick={this.btntaped.bind（this）}this.btntaped（）是this.btntaped的返回值，您必须写入它，不带括号写入它我仍然收到此错误：embedded:29 Uncaught TypeError:无法读取null的属性'btntaped'。请注意，如果它们不支持胖箭头，他们可以将上下文绑定到map函数
.map（函数（..）{}.bind（this））
这似乎根本不起作用。。。因此，不会调用该函数，也不会将消息记录到控制台。未捕获的TypeError:无法读取null的属性“btnTapped”
<button
    onClick={() => { console.log("button clicked");}}>
    button  
</button>