[英]ReactJs - onclick event for each child component
单击每个组件时,我试图触发一个事件。 谁能告诉我最好的方法吗? 自定义方法目前无法启动。 有人可以帮忙吗?
var MessageTypeNavigation = React.createClass({
displayName : 'MessageTypeNavigation',
// method I want to fire on each click
_clearBasket: function(){
console.log('clear basket');
},
_getPrimaryTabs: function(){
if(this.props.hidePrimaryTabs) return [];
var active = this.props.activeSection;
return [
<TabLink onClick={_clearBasket} isActive={active === 'general'} key="general" route="general-contacts" label="General" />,
<TabLink onClick={_clearBasket} isActive={active === 'attendance'} key="attendance" route="attendance-contacts" label="Attendance" />,
<TabLink onClick={_clearBasket} isActive={active === 'lateness'} key="lateness" route="temp" label="Lateness" />,
<TabLink onClick={_clearBasket} isActive={active === 'detention'} key="detention" route="temp" label="Detention" />,
<TabLink onClick={_clearBasket} isActive={active === 'behaviour'} key="behaviour" route="behaviour" label="Behaviour" />,
<TabLink onClick={_clearBasket} isActive={active === 'achievements'} key="achievements" route="achievements" label="Achievements" />
];
},
render: function() {
return (
<div>
<div>
<ul className="tabs">
{this._getPrimaryTabs()}
</ul>
</div>
</div>
);
},
});
嵌套的tabLink组件:
var TabLink = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
getTabClass: function () {
return this.props.isActive ? "active_on" : "";
},
getLinkNode: function() {
if (this.props.link) return <a href={this.props.link}>{this.props.label}</a>;
return <Link to={this.props.route}>{this.props.label}</Link>;
},
render: function () {
return (
<li className={this.getTabClass()}>
{this.getLinkNode()}
</li>
);
}
});
module.exports = TabLink;
_clearBasket
是您的组件的成员,而不是全局函数。 要引用它,您应该使用this._clearBasket
:
<TabLink onClick={this._clearBasket}
isActive={active === 'general'}
key="general" route="general-contacts" label="General" />,
自定义组件本身不支持onClick
。 它仅适用于dom元素。 您必须自己为TabLink
组件实现它。 您应该更改:
<li className={this.getTabClass()}>
{this.getLinkNode()}
</li>
至:
<li className={this.getTabClass()} onClick={this.props.onClick}>
{this.getLinkNode()}
</li>
在这里, onClick
是为<li/>
元素本地定义的。 this.props.onClick
是你传递给函数TabLink
在MessageTypeNavigation
组件。 该函数又绑定到_clearBasket
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.