リアクション入力にピントが合わない

Question

要素にピントを合わせようとして何か問題があります。私は入力とhtmlを吐き出すマップされた配列関数を持っています。複数のidを持つことは可能ですので、refを 'type' + Idに設定します。可能な2つのタイプは、taskとsubtaskです。私はthis.refs.{refValue}.focus()経由でのアクセスをしようとすると、私はここでCannot read property 'focus' of undefined

を取得し、私のJSXです：ここで私は

 var subTaskRef = 'subTask' + subTaskId; 
     this.refs.subTaskRef.focus(); 

私のエラーを取得する場所の変数subTaskIdが正しいことだ

<input className="ui-input-text" type="text" ref="subTask + {subTask.Id}" onChange={this.handleSubTaskChange.bind(this, indx, idx)} value={subTask.Name} /> 

、私はそれを確認しました。多分、私はrefを間違って設定していますか？

EDIT

@Ori Droriの答えに従った後、ここでいくつかのより多くのコードです：問題はそうどこ方法

render() { 
    const tasks = this.state.tasks.map((task, idx) => { 
     var editable = this.state.editableTasks.filter(id => id === task.Id).length > 0; 
     var editableSubTasks = this.state.editableSubTasks; 
     const subTaskComponents = task.SubTasks.map((subTask, indx) => 
      <li key={subTask.Id} className="list-group-item" style={{minHeight: '50px', border: 0, backgroundColor: 'rgba(127,191,63,.42)'}}> 
        <div className="pull-left" style={{width: '50%'}}> 
         <!-- Pay attention to this line -->{editableSubTasks.filter(id => id === subTask.Id).length > 0 ? <input className="ui-input-text" type="text" ref={ (ref) => this.focusSubTasks[subTask.Id] = ref } onChange={this.handleSubTaskChange.bind(this, indx, idx)} value={subTask.Name} /> : <span>{subTask.Name}</span>} 
        </div> 
        <div className="pull-right" style={{marginTop: '-5px', width: '50%'}}> 
         <div className="pull-right"> 
          <button className="btn btn-default" onClick={() => { this.EditSubTask(task.Id, subTask.Id)}}>{editableSubTasks.filter(id => id === subTask.Id).length > 0 ? <i className="fa fa-check"></i> : <i className="fa fa-pencil-square-o"></i>}</button> 
         </div> 
        </div> 
      </li> 
     ); 

をレンダリングする

class Tasks extends React.Component { 
focusTasks: [], 
focusSubTasks: [], 
constructor(props) { 
    super(props); 

    this.state = { 
     editableTasks: [], 
     editableSubTasks: [], 

     tasks: [], 
     subTasks: [],    
     plannerId: this.props.plannerId, 
    }; 

    var state = this.state; 


} 

と（の一部）がここにあります〜する（構築しない）

Answer 1

jQueryを使用するだけで、1行のコードで済むようになりました。私がやっていることがあまりにも複雑なのかどうかは分かりませんが、入力にIDを設定して、この問題を解決するには$(el).focus()と呼んでいます。誰かが実例を持っていない限り、私はこれを更新します。

Answer 2

コールバックを使用してクラスのプロパティを設定するのは、DOM要素にアクセスするための一般的なパターンであり、React Creatorはthis.refs.myRefパターンの代わりにこのパターンを使用することを推奨します。

---

class MyComponent extends React.Component { 

    // .. 

    render() { 
    return (

     <input ref={(thisEl) => { this['name' /* + subTask.Id */] = thisEl }} /> 
    ) 
    } 
} 

今、あなただけのthis['name' /* + subTask.Id */].focus()として使用することができます。

---

それはあなたがconsole.log(this.refs)が実際に正しい要素を持っており、あなたがミスをしなかった場合場合はお知らせしませんでした、特にために、あなたの問題の原因となることができればしかし、イムは100％確実ではありません。

どのようにあなたのために働くのか教えてください。

---

私は他の言葉で、jQueryのを使用することをお勧めしません：宣言型のコードで回避が不可欠コードを混在させないでください。あなたの問題のための簡単な解決策のように思えますが、Reactの要点をすべて理解するならば、jQueryは、特に長期的には、簡単な解決策ではないことが理解できます。