title: Set focus on input - React Component
body: <p>I have a react component which has a input field with disable attribute. On click of the component, the input gets enabled and user can type on the field. I'm able to achieve till there, but I need to focus on input field on getting enabled.</p>
  
  <p>Attributes.js</p>
  
  <pre><code>basicAmenitiesList.map(function(item, index){
       return &lt;Attribute key={index} 
                         name={item.amenity_id} 
                         type={item.title} 
                         icon={item.icon} 
                         selected={item.isSelected} 
                         value={item.value} 
                         onClick={_this.handleClick.bind(this)} 
                         onChange={_this.handleChange.bind(this)}/&gt;
  })
  </code></pre>
  
  <p>The Attribute file : </p>
  
  <pre><code>&lt;div onClick={this.handleClick.bind(this)}&gt;
  ...
         &lt;input type="text" name={this.props.name}
                ref={this.props.name}
                placeholder="NO INFO FOUND"
                value={this.props.value}
                disabled={!this.props.selected}
                onChange={this.props.onChange}
         /&gt;
  &lt;/div&gt;
  
  handleClick(e) {
      // I need to focus on enabling., that is when **this.props.selected** is true.
      return this.props.onClick(this.props.name);
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I tried onFocus for input, </p>
  
  <pre><code>onFocus(){
      this.refs.pets.focus();
  }
  </code></pre>
  
  <p>Right now I'm hard coding the refs name as <em>pets</em>, but is there any way to make it dynamic by sending the name with the onFocus?</p>