Vip*_*per 15 javascript reactjs
我试图在用户点击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'));
Gal*_*sha 14
如果您的构建系统支持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>mah*_*mnj 11
注意：不是 reactjs 专家 :)
我现在正在探索 reactjs 和 version 16.3.1箭头功能对我有用
<button
onClick={() => { console.log("button clicked");}}>
button
</button>
你应该设置一个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)}
由于您使用范围函数来映射数组,因此在以下内容中创建了新的上下文: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>;
});
小智 6
这是一篇旧帖子，仍然发布我的答案，因为我在 2021 年遇到了同样的问题，并且上面的答案都没有帮助。
我bundle.js在我的index.html文件中添加了。并且html-webpack-plugin还为我添加了它。加载bundle.js两次似乎导致了这个问题。从index.html 中删除该引用后，它工作正常
| 归档时间： |
|
| 查看次数： |
47482 次 |
| 最近记录： |