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。

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()。

但是，我不能100％确定这是否是导致问题的原因，特别是因为你没有让我们知道console.log(this.refs)是否确实有正确的元素，如果你没有犯错误。

让我知道它是如何为您服务的。

我不建议使用jQuery，换句话说：不要将可避免的命令式代码与声明性代码混合使用。对于你的问题来说，这似乎是一个简单的解决方案，但如果你能全面了解React，你就会明白jQuery不是一个简单的解决方案，特别是从长远来看。

无法专注于React输入

2 个答案: