Want to navigate via clickHandlers? 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 as your button:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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> ); } }); |
2. Use a
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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.
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
