設置重點輸入 - 反應組件

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