Set focus on input - React Component

Question

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.

Attributes.js

basicAmenitiesList.map(function(item, index){
     return <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)}/>
})

The Attribute file :

<div onClick={this.handleClick.bind(this)}>
...
       <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}
       />
</div>

handleClick(e) {
    // I need to focus on enabling., that is when **this.props.selected** is true.
    return this.props.onClick(this.props.name);
}

UPDATE

I tried onFocus for input,

onFocus(){
    this.refs.pets.focus();
}

Right now I'm hard coding the refs name as pets, but is there any way to make it dynamic by sending the name with the onFocus?

Khalid Azam · Accepted Answer · 2017-01-01 06:55:50Z

1

you can use autoFocus as property for input

<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}
              autoFocus
       />

answered Jan 1, 2017 at 6:55

Khalid Azam

1,64119 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jakub Strebeyko Over a year ago

I have the same problem and unfortunately, autofocus property is not an option in my case (possible multiple, nested / hidden inputs)

Collectives™ on Stack Overflow

Set focus on input - React Component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related