onClick 不工作 React js

IT技术 javascript reactjs
2021-05-14 11:24:00

我试图在用户单击 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'));
4个回答

如果您的构建系统支持 babel，请在您的 React 代码中使用 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)method。喜欢：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>;

});

注意：不是 reactjs 专家 :)

我现在正在探索 reactjs 并且 version 16.3.1箭头函数对我有用

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

对于那些面临这个问题的人，它也可能是由于一些 CSS 问题而发生的

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

pointer-events: none;

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

其它你可能感兴趣的问题
上一篇将螺纹螺母固定在打印件内的最佳做法 下一篇如何在react中对单选按钮进行默认检查？