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

Question

 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?      
},

 this.refs.todoText.focus()

this.refs.yourInputBox.focus();

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

Answer 1

您可以在输入框中使用它来将默认自动聚焦设置为该输入，还可以为输入框设置一个参考值。

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

试试看，希望管用