on单击不起作用的 React js

onClick not working React js

本文关键字：React js 不起作用 单击 on      更新时间：2023-09-26

当用户单击div时，我正在尝试调用一个函数（在反应中使用onClick）。我现在不需要传递任何参数，只需要调用函数。我对反应相当陌生.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'));

如果你的构建系统支持 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>

你应该将函数设置为onClick属性，而不是调用它。应该是：onClick={this.btnTapped}而不是onClick={btnTapped()}。

此外，也可以这样做：

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

它通常在需要将参数传递给函数时使用。

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

由于您使用 scope 函数来映射数组，因此在 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>;
});

定义按钮组件

// Button.jsx
import React from 'react';
const Button = (props) => {
    return <button onClick={props.onClick}>{props.children}</button>
}
export default Button;

并像这样使用它

// app.jsx
function handleClick() {
    console.log("Button clicked");
  }

<Button onClick={handleClick}>Click me</Button>

这有点菜鸟，但请检查您的onClick（）函数的拼写，我拼写错误，就像onclick（）一样，我花了好一个小时才找到它。

这是一个旧帖子，当我遇到同样的问题时，仍然发布我的答案2021 年，上述答案都没有帮助。

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

你在函数之前错过了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));

每当要在 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 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'));

对于此线程的答案无法解决问题的人，只需我的 2 美分。我面临类似的问题，调试后我发现我的按钮的"z-index"为 -9999，因此它在一层后面，因此单击没有到达它。我将 z 索引更改为正值 1，然后单击被捕获。

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

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

pointer-events: none;

我刚刚从我的 CSS 中删除了它，点击事件开始在 React 中工作！

如果您使用的是 webpack，请确保您在 webpack.config.js 中配置的输出文件（通常是 bundle.js）未添加到您的 index.html 文件中。

这为我解决了问题。

避免经典的JS方法，如

test(){ console.log('test') }

而是使用回调影响，例如

test = () => { console.log('test') }

告诉我它是否有帮助

有时它只是一个错误，只需重新启动服务器即可工作。

在我的情况下，包含按钮的div 被外部div 包裹。因此，事件没有被触发。我在按钮旁边还有一个输入框，由于外部div，我也无法单击输入框。

为了了解导致问题的原因，我在周围的div 中添加了一个红色边框，然后我开始了解包裹我的主要div 的外部div。

所以我对这类问题的建议是为附近的元素添加边框，例如

border: '1px solid red'

然后尝试找出限制事件的原因。

相关文章：