ReactJS: показать + фокус поле ввода

Я хотел бы показать и сфокусировать поле ввода в то же время. Я ищу совет по самому элегантному способу сделать это.ReactJS: показать + фокус поле ввода

Упрощенный подход, который не работает, будет: * Элемент, содержащий поле ввода, изменяет состояние, которое отображает окно ввода, устанавливая display = ''. Я получил эту часть, чтобы работать. * Элемент, который содержит поле ввода, получает дочерний элемент через ref и вызывает .focus() в своем элементе DOM. Это та часть, которая не работает.

Я думаю, это связано с тем, что изменение стиля (display = '') не распространяется на реальный DOM, поэтому focus() не работает.

Я могу придумать, как это исправить (поле ввода может иметь состояние var isFocusing, которое вызывает focus() только после выполнения рендеринга), но я хотел бы услышать, есть ли более элегантный способ достижения этого ,

Спасибо!

источник

2015-09-29 Chris

componentDidUpdate (prevProps, prevState) вызывается сразу же после того, как обновления сброшены в DOM, и его можно использовать для фокусировки окна ввода в нужное время.

componentDidUpdate(prevProps) { 
    if(!prevProps.show && this.props.show){ 
    // We transitioned from hidden to shown. Focus the text box. 
    this.refs.myInput.getDOMNode().focus(); 
    } 
}, 
render(){ 
    return (
    <form> 
     <input className={this.props.show ? 'input-shown' : 'input-hidden} /> 
    </form> 
    ); 
}

Существует подробнее в документации здесь: https://facebook.github.io/react/docs/more-about-refs.html

источник

2015-09-29 17:39:29

Спасибо за идею! Я думаю, что текущий impl имеет небольшую ошибку, поскольку каждое обновление будет фокусировать компонент - немного раздражает. Я только что заметил, что componentDidUpdate дает вам предыдущий реквизит/состояние, которое позволяет фокусировать() только на this.state.show переходы. – Chris

Да, требуется немного больше логики в зависимости от варианта использования, но использование refs - это трюк! Вы также можете использовать jquery с refs, например: $ (React.findDOMNode (this.refs.myRef)). Show(); –

Используйте родительскую настройку родителя с родителем, отправив скрытую подсказку. В child render if (this.props.hide) возвращает null; или вернуть вход. Также в дочернем компоненте useWillReceiveProps (nextProps) и установите фокус.

источник

2015-09-29 16:11:16

ReactJS: показать + фокус поле ввода

ответ

Смежные вопросы