Невозможно сфокусироваться на вводе React

Question

Имея некоторые проблемы с попыткой сосредоточиться на элементе. У меня есть отображаемая функция массива, которая выплевывает html с входами. Возможно иметь несколько идентификаторов, поэтому я хочу, чтобы ref был «type» + Id. Двумя возможными типами являются task и subtask. При попытке доступа через this.refs.{refValue}.focus() я получаю Cannot read property 'focus' of undefined

Вот мой JSX:

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

Вот где я получаю моя ошибка

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

Переменная subTaskId правильно, я проверил это. Возможно, я неправильно установил ref?

EDIT

Выполнив ответ @Ori Дрори, вот это еще какой-то код:

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; 


} 

и (часть) мой метод визуализации

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

Вот где проблема кажется (не будет строить)

Answer 1

Закончено только с помощью jQuery, это намного проще, если это одна строка кода. Не уверен, что то, что я делаю, слишком сложно для этого, но в итоге я установил идентификатор на входах и просто позвонил $(el).focus(), чтобы решить эту проблему. Если у кого-то нет рабочего примера, я обновлю это.

Answer 2

Использование обратного вызова ref, чтобы установить свойство класса, является распространенным шаблоном для доступа к элементам DOM, и создатели React рекомендуют использовать этот шаблон вместо шаблона this.refs.myRef.

---

class MyComponent extends React.Component { 

    // .. 

    render() { 
    return (

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

Теперь вы можете просто использовать его как this['name' /* + subTask.Id */].focus().

---

Однако, Im не 100% уверен, что может быть причиной вашей проблемы, особенно потому, что вы не дали нам знать, если console.log(this.refs) на самом деле имеет правильные элементы, и если вы не делали ошибок.

Дайте мне знать, как это работает для вас.

---

Я не рекомендую использовать JQuery, другими словами: не смешивать предотвратимой императивный код с декларативным кодом. Похоже, это простое решение для ваших проблем, но если вы получите всю суть React, вы поймете, что jQuery - не простое решение, особенно в долгосрочной перспективе.