Is there a way to add other click handlers onto the NavLink?

[tedlin182]

I want to preserve the native behavior of NavLink but also want it to trigger a state change in a component via a custom handler I created.

When I add the onClick to the NavLink component it does direct to the new page but does a page refresh also.

Not sure if this has been addressed but let me know if there's a way to do that. Apologies if this is a noob question.

[lingyan]

Did you preventDefault the click event? https://github.com/yahoo/flux-router-component/blob/master/lib/NavLink.js#L70

[lingyan]

Closing this issue. Feel free to reopen with the issue still exists.

[agrippanux]

This issue still happens; if you call preventDefault() then it stops NavLink from completing execution

[tedlin182]

Hi @lingyan

Yeah preventDefault prevents NavLink from executing. Is there a way to execute both it's intended behavior and additional handlers I attach to it?

[lingyan]

@tedlin182 Sorry, for some reason my email app filtered some of my github emails into spam folder. So did now see your comment till now :(

As part of https://github.com/yahoo/flux-router-component/pull/81, we are planning to wrap the logic in NavLink's dispatchNavAction (https://github.com/yahoo/flux-router-component/blob/master/lib/NavLink.js#L58-L104) into a separate lib. So that you can provide your own onClick handler for NavLink, and use the lib for navigate behavior.

Let us know if it will be ok for you to wait for that PR, which we want to merge this week. Thanks!

[tedlin182]

Sounds good. Thanks for the update and no worries on the lateness.

[mridgway]

Reopening so I can track this as part of #81.

[longlho]

+1 for this :)

[kaddopur]

I bind my custom click handler this way

var EventListener = require('react/lib/EventListener');

componentDidMount: function() {
    var fooComponent = this.refs.foo;
    if (fooComponent) {
        EventListener.listen(fooComponent.getDOMNode(), 'click', this.barHandler);
    }
},
render: function () {
    return (
        <NavLink ref="foo" href={this.props.uri}>{this.props.foo}</NavLink>
    );
}

[samkelleher]

#181 was closed but the changes required for this issue to be resolved weren't made.

I think what is needed is a prop to pass in a function that can be called after the NavLinks handler has been executed.

I don't want to override the click behaviour, but do something else (collapse an expanded navigation bar).

[abrudin]

Another workaround would be to wrap the content of the NavLink with a component with an onClick handler, i.e. <NavLink><div onClick={myClickHandler}>Some content</div></NavLink>

But I would also appreciate a simpler way to add onClick functionality to a NavLink.

[mettin]

@abrudin is this working properly for you? We we're using this technique but the onClick event doesn't fire when you click the NavLink element using the keyboard to tab focus to it and press enter.

[abrudin]

@mettin Good point. No, the click handler is not invoked when using the keyboard (as the keyboard focuses on the a element instead of the div) - i guess you could add some kind of onkeydown handler on the navlink, but it is starting to look ugly indeed.

[mettin]

Yes, it's quite annoying. We want to have some tracking on the NavLink but it's quite impossible now. (we can only track the pageload where we're going to now). I'll update this thread if/when we find a solution

[trajano]

I did the change handling on the render method, but got this expected warning ...

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

Going to see if there's another alternative.

[BillOTei]

what about wrapping in another element and handling the onClick on it? <li onClick={function() {this.props.handleScreenNb('E705');}.bind(this)}> <NavLink exact activeClassName='active' to={config.baseUrl+'/'}>Etat civil / Domiciliation du salarié</NavLink> </li>

[andrew-finlayson]

Probably a bit late on this one but I found this result worked best for me:

<a href="javascript:void(0)" onClick={clickHandler} className = "nav-link">Your Label</a>

[B4BIPIN]

<NavLink to='/' onClick={this.handleReset}>Reset</NavLink>
 <NavLink to='/features' onClick={this.handleNext}>
          {this.state.activeStep!==3?'Next':'Done'}
</NavLink>

In my case Both are running without giving any problem. Version-"react": "^16.8.5"

[Malavos]

@B4BIPIN I tried your solution, a simple onClick on the NavLink element, and I also tried inserting a div, like so:

<NavLink className="dropdown-item" to="/myarea" onClick={(e) => {
    alert('It's alive!')
}}>
    My Area
</NavLink>

It won't work with me. Anyone got any tips?