Установка фокуса на компонент input — React

У меня есть компонент react, который имеет поле ввода с атрибутом disable. При щелчке компонента ввод будет включен,и пользователь сможет ввести в поле. I’M able to achieve till there, but I need to focus on input field on getting enabled.

Атрибуты.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)}/>
})

Файл атрибутов :

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

ОБНОВЛЕНИЕ

Я попробовал onFocus для ввода,

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

Прямо сейчас я жестко кодирую имя refs как домашние животные, но есть ли способ сделать его динамичным, отправив имя с онфокусом?

1 ответ

  1. автофокус можно использовать в качестве свойства для ввода

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