Я хочу что-то между контролируемым и неконтролируемым компонентом в React - PullRequest
Новая
       46

Я хочу что-то между контролируемым и неконтролируемым компонентом в React

0 голосов
/ 22 апреля 2020

У меня есть поле ввода в React. 

<input 
    type = "number"
    value = {this.props.answer || undefined}
    onKeyUp = {(e) => (e.keyCode === 13) ? onAnswer(e.target.value) : false }
/>

Таким образом, он ведет себя так же, как мне нужно, чтобы он вел себя:

  • Если нет this.props.answer, есть На входе нет начального значения.
  • Пользователь может ввести любое число. Ничего не происходит на onChange
  • Когда пользователь нажимает Enter, состояние изменяется (в функции onAnswer). После этого значение поля ввода остается this.props.answer, и пользователь НЕ может больше изменять это значение.

Но когда пользователь нажимает Enter, я получаю это предупреждение:

Компонент изменяет неконтролируемый ввод типа номера для управления.

Я читал о неконтролируемых компонентах и ​​пробовал это: 

<input 
    type = "number"
    defaultValue = {this.props.answer || undefined}
    ref={this.input}
    onKeyUp = {(e) => (e.keyCode === 13) ? onAnswer(e.target.value) : false }
/>

Таким образом, я не могу предупреждение не появляется, но поле ввода остается редактируемым после того, как пользователь нажмет Enter. Я также пытался использовать свойства value и defaultValue, но затем снова получаю то же предупреждение.

Я хочу, чтобы поле ввода было своего рода контролируемым, но я не хочу менять состояние на onChange, но только когда пользователь нажимает Enter (onKeyUp). После этого пользователь не сможет редактировать ввод. Есть ли способ реализовать это поведение?

ОБНОВЛЕНИЕ: я не знал, что могу установить свойство readOnly для ввода на основе состояния. Установка его в false после установки состояния решает мою проблему.

1 Ответ

0 голосов
/ 22 апреля 2020

Вы можете запретить редактирование ввода в обработчике события keyUp: 

onKeyUp = (e) => {
   // Check if we still accept typing
   if (no_more_typing) return e.preventDefault();
   // Handle enter key
   if (e.keyCode === 13) onAnswer(e.target.value);
}

<input
  onKeyUp={onKeyUp} ...
...