入力に重点を置く - 反応成分

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

今私はペットのようにrefsの名前をハードにコーディングしていますが、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 
     />