Question

我试图在用户点击div时调用一个函数（使用onClick in react）。此刻我不需要传递任何参数，只需要调用该函数即可。我很反应。因为我的无知而提前道歉。感谢。

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'));

Answer 1

如果您的构建系统支持babel，请在您的反应代码中使用ES6箭头函数。

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

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.btnTapped = this
            .btnTapped
            .bind(this);
    }
    btnTapped() {
        console.log('tapped');
    }
    render() {

        return (
            <div>
                {this
                    .props
                    .stations
                    .map((station, index) => {
                        return <div key={index} onClick={this.btnTapped}>{station}</div>
                    })
                }
            </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'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>
  <div id="test-div"></div>
</body>

Answer 2

您应该将函数设置为onClick={this.btnTapped}属性，而不是调用它。应该是：onClick={btnTapped()}而不是<div onClick={function(e) { this.btnTapped(); //can pass arguments this.btnTapped(foo, bar); }} >。

此外，可以这样做：

bind(this)

当您需要将参数传递给函数时，通常会使用它。

此外，为了能够从外部函数获取组件的上下文，您应该使用onClick={btnTapped.bind(this)}方法。喜欢：this.props.stations.map(function(station, index){}

由于您使用范围函数来映射数组，因此在this内创建了新的上下文。而且var stationComponents = this.props.stations.map((station, index) => { return <div onClick={this.btnTapped}><img src="img/test.png" />{station}</div>; });被覆盖了。只需使用arrow function代替：

import numpy as np
d = np.asarray(data)
plt.plot(d[:,0],d[:,1])
plt.show()

Answer 3

注意：不是reactjs专家：）

我现在正在探索reactjs，从version 16.3.1开始，箭头功能对我有用

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

Answer 4

在功能之前，您错过了this关键字。你也必须提供功能但不要调用它

<div onClick={this.btnTapped}>

更新：

您错过了在地图回调函数中重新定义this。

使用箭头功能

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

或将上下文绑定到函数

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

Answer 5

对于这个问题无法解决的人，只需2美分。我遇到了类似的问题，在调试之后，我发现我的按钮的“ z-index”为-9999，因此它位于图层的后面，因此单击没有达到它。我将z-index更改为正值1，并捕获了点击。

Answer 6

对于那些面临此问题的人，也可能由于某些CSS问题而发生

对我来说，它通过删除名为“ pointer-events”的CSS属性而起作用。在我的CSS中，它设置为none。即

pointer-events: none;

我刚刚从CSS中删除了它，并且click事件开始在React中起作用！

Answer 7

每当要在render方法中使用函数时，首先需要在构造函数中绑定这些方法。还有一件事是，当您不想将任何参数传递给需要调用的方法时，请使用此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 you need to use inside the render method...
}

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'));

Answer 8

<块引用>

这是一个旧帖子，仍然发布我的答案，因为我在 2021 年，上面的答案都没有帮助。

我在 bundle.js 文件中添加了 index.html。 html-webpack-plugin 也为我添加了它。加载 bundle.js 两次似乎导致了这个问题。从 index.html 中删除该引用后，它工作正常

Answer 9

这有点像菜鸟建议，但请检查您的 onClick() 函数的拼写，我拼写错误，如 onclick() 并且它花了我一个好一个小时才能找到它。

onClick不工作React js

9 个答案: