javascript - 将焦点放在受控组件中表单的输入字段

Question

我在 React js 上有这个简单的表单

 render: function(){    
    return (
        <div>                                   
            <form onSubmit={this.hanldeSubmit} >
                <input 
                    type='text' placeholder='What do you need to do?' required
                    onChange={this.handleChange} value={this.state.value}   
                />
                <button className='button expanded'>Add Todo</button>
            </form>
        </div>  
    );
}

这是提交处理程序。我想将焦点放在输入字段上。请告诉我在没有引用的受控组件中执行此操作的更正确方法:

 hanldeSubmit: function(e){
    e.preventDefault();
    var {value} = this.state;
    if(value){
        this.props.onAddTodo(value);
        this.setState({value: ''});
    }

    //how to set focus on input field?      
},

我用 refs 找到了这段代码:

 this.refs.todoText.focus()

提前致谢

更新:

---

好的，如果我使用 refs 来设置焦点:

this.refs.yourInputBox.focus();

我应该让我的组件处于“受控”状态吗？什么是“最佳实践”？

Answer 1

您可以在输入框中使用它来为该输入设置默认的 autoFocus 并为输入框设置一个 ref 值。

<input 
 type='text' ref="yourInputBox" placeholder='What do you need to do?'
 onChange={this.handleChange} value={this.state.value}
 autoFocus   
/>

在需要的 else 条件下使用它。

 hanldeSubmit: function(e){
   e.preventDefault();
   var {value} = this.state;
   if(value){
      this.props.onAddTodo(value);
      this.setState({value: ''});
   }
   else{
      this.refs.yourInputBox.focus();
   }
 }

尝试这个希望它有效