title: set focus on input element after clicking an anchor tag in react
body: <p>I have two components:</p>
  
  <p>In my parent component I have:</p>
  
  <pre><code>    //set focus object to false
      // include Child Component and React libraries
      const parent = React.createClass({
      getInitialState: function() {
        return {
          focus: false
        };
      },
        render() {
          return(
            &lt;div&gt;
              &lt;Child focus={this.state.focus} /&gt;
              &lt;a onClick={this._handleClick}&gt;Click me&lt;/a&gt;
            &lt;/div&gt;
          );
        },
  
        _handleClick: function() {
          this.setState({focus: !this.state.focus});
        },
      };
  </code></pre>
  
  <p>And inside my Child component I have an input tag:</p>
  
  <pre><code> const child = React.createClass({
        render() {
          return(
            &lt;div&gt;
              &lt;input type="text" ref="input" /&gt;
            &lt;/div&gt;
          );
        },
  
    componentWillReceiveProps: function() {
      this.refs.input.focus();
    },
  };
  </code></pre>
  
  <p>In summary what I am trying to do in my method is to focus on the input tag by changing the prop to call componentWillReceiveProps. However right now this is not working. It ends up just focusing on the anchor tag. Any idea of what I am doing wrong?</p>
  
  <p>Edit: To further go into detail about my issue is that once I click the anchor tag, the input element in the child component does not get focused on. How can i make it get focused on?</p>