Форма ввода - изменение текущего порядка onChange и isDisabled

Я реализовал в React веб-страницу с тремя полями ввода, каждый из которых обладает свойствами

onChange = {this.isDisabled ()} и render = {this.handleChange}

Желаемое поведение заключается в том, что когда поле ввода содержит 2 цифры, фокус будет перемещен в следующее поле ввода. Пока поле не содержит 2 цифры, поля рядом с ними должны быть отключены .

Что на самом деле происходит, когда я ввожу вторую цифру в первом поле, она запускает истинную функцию, эта функция проверяет, содержит ли поле 2 цифры, узнает, что да, и перемещает фокус в следующее поле ввода.

Но следующее поле отключено! (потому что функция isDisabled еще не запущена!) Таким образом, курсор не перемещается. Я хочу изменить порядок событий или любой другой способ его решения.

Есть ли у вас какие-либо предложения?

javascript,reactjs,input,

0

Ответов: 2

1

Проблема заключается в том, что this.isDisabled()выполняется сразу, falseно this.handleChangeвыполняется по клику и, по всей вероятности, не изменяет состояние, таким образом, нет rerender.

Вы не запускаете функцию на следующем входе, вы должны пройти disabledили handleChangeк ее disabledопоре. Просто handleChangeобновите состояние, которое определяет, какие поля отключены. И передайте это состояние соответствующим вашим входам.

1

Я столкнулся с той же проблемой несколько дней назад. Однако мой подход использовал реакционные состояния и фокусировал вход по его идентификатору, который был выбран из состояния;

Поэтому сначала сделаем input - idкарту для нашего удобства. И используйте document.getElementById(this.state.active).focus()функцию. Мы меняем наше состояние с помощью нашего обработчика изменений.

render() {
  this.setInputFocus();
  return (
     <div className="App">
       <input id="1" onChange={this.onChange} />
       <input id="2" onChange={this.onChange} />
       <input id="3" onChange={this.onChange} />
     </div>
   );
 }

 setInputFocus = () => {
   if (document.getElementById(this.state.active)) {
     document.getElementById(this.state.active).focus();
   }
 };
 onChange = e => {
   if (e.target.value.length === 2) {
     this.setState({ active: this.state.active + 1 });
   }
 };

Вот полный код, который несколько решает проблему

JavaScript, reactjs, вход,
Похожие вопросы
Яндекс.Метрика