Почему в React.js в событии onKeyUp не работает event.preventDefault()?

Question

[Isaac Clark]

Здравствуйте.
Подскажите пожалуйста, вот код

<input type="text" placeholder={item.name} onKeyUp={self.checkName} />

 checkName: function (event) {
    event.preventDefault();      
    },

Почему методе event.preventDefault(); не отрабатывает, то есть я как печатал так и печатаю, а если я поменю keyUp , к примеру на keyDown, то тогда норм, не могу вводить символы.

Answer 1

[Super User]

Вы сами ответили на свой вопрос.

А вообще:

keyup
Fires when the user releases a key, after the default action of that key has been performed.

То есть событие keyup происходит, когда пользователь отпускает клавишу, после того, как дефолтное действие этой клавиши произошло.
Источник: www.quirksmode.org/dom/events/keys.html

Comments

[Isaac Clark]

а как же тогда сделать, так, чтоб если пользователь вводит в строку значение, которое не соответсвует регулярному выражению - выполнялась функция event.preventDefault() ? ведь keyDown и keyPress для этого не подходят, так как они берут старые занчения

[Super User]

Isaac Clark: Попробуйте еще textinput. А вообще, для этого есть htmlbook.ru/html/input/pattern

[Super User]

Isaac Clark: Еще нашел такую штуку https://github.com/insin/react-maskedinput

[Isaac Clark]

Super User: первый вариант интересен, а есть возможность его реализовать при нажатии клавишы?

Answer 2

[Никита Гущин]

а как же тогда сделать, так, чтоб если пользователь вводит в строку значение, которое не соответсвует регулярному выражению - выполнялась функция event.preventDefault() ? ведь keyDown и keyPress для этого не подходят, так как они берут старые занчения

У вас подход в корне неправильный. Ваш инпут находится в состоянии uncontrolled. И вам нужно вместо этого сделать так:

<input type="text" value={someValue} onChange={handleChangeSomeValue}/>

handleChangeSomeValue(e) {
    const nextVal = e.currentTarget.value;
    if (!isValid(nextVal)) {
      return;
    }
    this.setState({ someValue: nextVal });
  }

Рабочий пример -> jsfiddle.net/yuvuyrhv/20
Ну и читаем документацию -> https://facebook.github.io/react/docs/forms.html