Установить фокус на поле ввода формы в контролируемом компоненте

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

Я нашел этот код с рефов:

this.refs.todoText.focus() 

Заранее спасибо

UPDATE:

---

Хорошо, если я использую refs для установки фокуса:

this.refs.yourInputBox.focus(); 

Должен ли я держать элемент под контролем? Что такое «лучшая практика»?

Answer 1

Вы можете использовать это в своем поле ввода, чтобы установить автофокус по умолчанию, чтобы этот вход также установил значение 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(); 
    } 
} 

попробовать эту надежду он работает