reactjs - 无法专注于 React 输入

Question

在尝试专注于某个元素时遇到一些麻烦。我有一个映射数组函数，它会吐出带有输入的 html。可能有多个 id，所以我想将 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 不正确？

编辑

按照@Ori Drori 的回答，这里有更多的代码:

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，一行代码就容易多了。不确定我正在做的事情是否太复杂了，但我最终在输入上设置了一个 id，然后调用 $(el).focus() 来解决这个问题。除非有人有工作示例，否则我将更新此 SO。