How to navigate via clickHandlers?

Question

I just started learning React and I'm stuck in the following scenario.

There is an input field and on clicking the search button it takes the input value and redirect to /search/search-query/some-action

I have setup the path, defined the route to the correct view. And, I was able to do hit this path using href links. But my actual requirement is to have a button and take user to this path via onClick handler.

Searched a lot and found multiple (vague) solutions like, react-navigate-mixin etc. But I couldnt find any documentation around its usages.

Can anyone point me in the right direction?

Answer 1

I'm gonna make the assumption that you're not building a single page app and using something along the lines of React router. And that what you need to do is simply navigate to a url based on the input.

There are two main ways of doing depending on wether you want to:

1. Style an <a> as your button:

var Component = React.createClass({   getInitialState: function() { return {query: ''} },   queryChange: function(evt) {     this.setState({query: evt.target.value});   },   _buildLinkHref: function() {     return '/search/'+this.state.query+'/some-action';   },   render: function() {     return (       <div className="component-wrapper">         <input type="text" value={this.state.query} />         <a href={this._buildLinkHref()} className="button">           Search         </a>       </div>     );   } }); 

This way you're keeping the query (value of the input) in the state. And whenever the input changes is automatically changes the href of the link.

2. Use a <button> and redirect programatically:

var Component = React.createClass({   getInitialState: function() { return {query: ''} },   queryChange: function(evt) {     this.setState({query: evt.target.value});   },   handleSearch: function() {     window.location = '/search/'+this.state.query+'/some-action';   },   render: function() {     return (       <div className="component-wrapper">         <input type="text" value={this.state.query} />         <button onClick={this.handleSearch()} className="button">           Search         </button>       </div>     );   } }); 

This way you handle the redirect programatically by setting your desired location to window.location.

Answer 2

Adding on from the existing answer may need to bind your function like so:

constructor(props) {     super(props);     this.handleSearch = this.handleSearch.bind(this); }