How To Navigate Via Clickhandlers?

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/se

Solution 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:

varComponent = 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 (
      <divclassName="component-wrapper"><inputtype="text"value={this.state.query} /><ahref={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:

varComponent = 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 (
      <divclassName="component-wrapper"><inputtype="text"value={this.state.query} /><buttononClick={this.handleSearch()}className="button">
          Search
        </button></div>
    );
  }
});

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

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