React-Router Link, how to trigger a click event on a link from another component

Question

I am trying to create a React-Router series to navigate within a specific component. I configured it so that the link tags work correctly, but I'm trying to configure them like this:

Styling is configured as follows:

<div className="btn-group" data-toggle="buttons"> <label className="btn btn-primary-outline active"> <input type="radio" name="options" id="option1" autocomplete="off" checked />Payments </label> <label className="btn btn-primary-outline"> <input type="radio" name="options" id="option2" autocomplete="off" /> Bills </label> <label className="btn btn-primary-outline"> <input type="radio" name="options" id="option3" autocomplete="off" /> Charge </label> </div> 

And the current series of links looks like this (without styling):

 <ul> <Link to='/options/option1'>option1</Link> <Link to='/options/option2'>option2</Link> <Link to='/options/option3'>option3</Link> </ul> 

HTML (above) is written in HTML, not JSX, but that is not a problem. I am trying to combine the Linking Components in the HTML above so that the parameters activate link tag functionality.

In the React documentation, I found this:

For communication between two components that do not have a parent-child relationship, you can configure your own global event system. Subscribe to events in componentDidMount (), unsubscribe from componentWillUnmount () and call setState () when you receive the event. A flow pattern is one of the possible ways to organize it.

So, it gave me the idea to put Link tags inside their respective labels, giving them the style {{display: 'none'}}, and by clicking on the radio buttons, click on the corresponding link tag. This will ensure that all the same functions that we expect from the Link tag are performed (clicking on the browser history, etc.).

However, the following does not work:

 <label className="btn btn-primary-outline active" onClick={() => document.getElementById('linkToOption1').click() }> <Link to='/options/option1' id="linkToOption1" style={{display: 'none'}}>Option1</Link> <input type="radio" name="options" id="option1" autoComplete="off" defaultChecked />Option1 </label> 

In the previous example, you can see that I created an onClick event handler that selects the Link tag id and triggers a click.

Answer 1

I was able to solve my problem, so I am posting what worked for me. Please reply or comment if a change or a better solution.

I could not trigger the click event of the link, but I was able to simulate the aspects that I need.

To do this, I needed the following:

• click the click button for the History browser to update the route.
• bind the "active" css class to the current view / URL (I executed this through the component state)
• update the state whenever the URL is changed (the changed state on the popstate event of the window, as well as updating the state of the currentView on the component will be mounted)

This causes the correct tab to be highlighted when you click on the tab, when the URL is manually changed to a specific route, and when the browser back / forward buttons are used.

This is all the code in my navmenu file, which creates a pretty cool navigation component and works with the reaction router and browser.

 import React, { Component, PropTypes } from 'react' import { Link, browserHistory } from 'react-router' class Navmenu extends Component { constructor(props) { super(props) this.state = { currentView: '' } this.getClasses.bind(this) } // in case of url being manually set, figure out correct tab to highlight // add event listener to update the state whenever the back/forward buttons are used. componentWillMount() { this.changeLocation() window.addEventListener('popstate', this.changeLocation.bind(this)) } componentWillUnmount() { window.removeEventListener('popstate', this.changeLocation.bind(this)) } // update state based on the URL changeLocation() { const path = window.location.pathname.split('/') const currentView = path[path.length - 1] this.setState({ currentView }) } // update state and update react-router route navigateToRoute(route) { this.setState({ currentView: route }) browserHistory.push(`/options/${route}`) } // give correct tab the 'active' bootstrap class getClasses(link) { let classes = 'btn btn-primary-outline flex-button' if (this.state.currentView === link) { classes += ' active' } return classes } render() { return ( <div className="btn-group flex-navbar" data-toggle="buttons"> <label className={this.getClasses('option1')} onClick={() => this.navigateToRoute('option1')}> <input type="radio" name="options" id="option1" autoComplete="off" defaultChecked />option1 </label> <label className={this.getClasses('option2')} onClick={() => this.navigateToRoute('option2')}> <input type="radio" name="options" id="option2" autoComplete="off" /> option2 </label> <label className={this.getClasses('option3')} onClick={() => this.navigateToRoute('option3')}> <input type="radio" name="options" id="option2" autoComplete="off" /> option3 </label> </div> ) } } export default Navmenu