设置重点输入 - 反应组件

Question

我有一个具有禁用属性的输入字段的反应组件。点击组件后，输入被启用，用户可以在该字段上键入。我能够实现到那里，但我需要专注于启用输入字段。

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

的属性文件：

<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

我试过的onfocus输入，

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

现在我很难编码的参考名称为宠物，但有没有什么办法通过发送名称与onFocus动态？

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