Javascript 将焦点设置在受控组件中窗体的输入字段上

我在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>  
    );
}

我在参考文献中找到了这段代码：

 this.refs.todoText.focus()

提前谢谢

更新：

---

如果使用参照设置焦点，则确定：

this.refs.yourInputBox.focus();

---

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

您可以在输入框中使用此选项为该输入设置默认自动对焦，也可以为输入框设置参考值

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

---

试试这个，希望它能起作用

非常感谢。据我所知，它在调用渲染方法后设置焦点。但是如何在提交了空字段的表单后设置焦点呢？我相信即使在表单提交后自动聚焦也会保持不变。如果您不想提交一个空字段，只需在输入框中键入“非常感谢您的回答”。但在提交后焦点将不再保留。我更新了我的问题-如何以任何方式在handleSubmit中设置焦点-数据是否有效

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

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