我有以下几点:
var SingleEditableModule = React.createClass({
show_overlay: function(e) {
console.log($(e.target).attr('id'));
},
render: function() {
var show_overlay = this.show_overlay;
return (
<div className="large-4 small-12 columns">
<h3 className="title">{this.props.data.title}</h3>
<div className="month">
<p>
{this.props.data.month}
</p>
</div>
<div className="img-holder">
<div
id={this.props.data.id}
onClick={show_overlay}
className="action_wrapper">
<span className="swap_trigger"></span>
<span className="action">
{this.props.data.action}
</span>
</div>
</div>
<h4>{this.props.data.title_description}</h4>
<p>{this.props.data.description}</p>
</div>
);
}
});
当我单击“ action_wrapper”以检索ID值时,我不确定。根据我的数据结构,我应该得到“ D”或“ E”:
var empty_modules_DE = [
{
id: 'D',
title: 'Module D',
title_description: 'Your first rotation',
description: 'In your penultimate module, Module D, you have the option of taking electives and spending six weeks at any of Hult’s home campuses, or our rotation centers in Shanghai and New York. You can choose to stay for the next module and extend your stay to twelve weeks if you prefer to only rotate once.',
action: 'click to choose a campus',
month: 'june'
},
{
id: 'E',
title: 'Module E',
title_description: 'Where to next?',
description: 'For your final module, Module E, you can choose to take electives and spend six weeks at any of Hult’s seven campuses worldwide. That includes all five of our home campuses, and our rotation centers in Shanghai, New York, and Ashridge Estate, U.K.',
action: 'click to choose a campus',
month: 'june'
}
];
1) 由于您使用 React.createClass
,而不是es6 class,因此React为您自动绑定
您只需要添加它。在func之前:
onClick={this.show_overlay}
2) 您不需要使用jquery,因为在您的特定情况下,您可以从this.props.data.id获取ID
show_overlay: function() {
console.log(this.props.data.id);
},
3) 在某些情况下,如果您在道具中没有id,而您想将一些arg传递给函数,则可以使用bind
onClick={this.show_overlay.bind(null,"someValue")}
然后在回调中
show_overlay: function(someValue) {
console.log(someValue);
},
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句