ReactJs - onclick event for each child component

Question

I am trying to fire of an event when each component is clicked. Can anyone please tell me the best way to go about this? The custom method doesn't fire off at the moment. Can anyone help?

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>
    );
},
});

Nested tabLink component:

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;

manji · Accepted Answer · 2015-08-24 11:05:14Z

4

_clearBasket is a member of your component, not a global function. To reference it, you should use this._clearBasket:

<TabLink onClick={this._clearBasket} 
         isActive={active === 'general'} 
         key="general"  route="general-contacts" label="General" />,

Edit:

onClick is not supported natively on custom components. It only works for dom elements. You have to implement it yourself for the TabLink component. You should change:

<li className={this.getTabClass()}>
     {this.getLinkNode()}
</li>

to:

<li className={this.getTabClass()} onClick={this.props.onClick}>
     {this.getLinkNode()}
</li>

Here, onClick is defined natively for <li/> elements. this.props.onClick is the function that you pass to TabLink in your MessageTypeNavigation component. That function, in turn is bound to _clearBasket.

edited Aug 24, 2015 at 11:05

answered Aug 24, 2015 at 10:49

manji

48k5 gold badges98 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bomber Over a year ago

Thanks for the reply, I've tried this. but it still doesn't fire the onClick

manji Over a year ago

Is TabLink a component of yours? Can you add it to your question?

Taylor Allred Over a year ago

If you add onClick={this.func} it's passed to the component as a prop this.props.onClick. onClick can be an event on a DOM element but will be a prop on a component. The edit above looks correct bc the <li has the onClick event which calls the passed in prop.

Collectives™ on Stack Overflow

ReactJs - onclick event for each child component

1 Answer 1

Edit:

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related