Проверка TextField и обработчик события onChange для пользовательского интерфейса не работают должным образом - PullRequest
Новая
       43

Проверка TextField и обработчик события onChange для пользовательского интерфейса не работают должным образом

0 голосов
/ 04 апреля 2019

Я использую Реагирует и Material-UI TextField с type='number', но, как я увидел, проверка довольно проста, она просто позволяет любой символ, который мог бы представлять часть числа [0-9\.eE-]*, допуская такие вводные данные: eee---...e---0.-1, я решил реализовать свою собственную проверку. (не уверен, является ли эта тривиальная проверка Material-UI или HTML-нативной, но все равно не имеет значения)

Итак, я написал это регулярное выражение для проверки, но как только я введу символ, который не соответствует моему регулярному выражению, обработчик событий my onChange не будет вызван вообще и кажется, что компонент берет на себя управление и применяет свою базовую проверку. Мой обработчик событий не будет вызываться снова, пока я не исправлю ввод и не сопоставлю его с моим регулярным выражением.

Можно ли как-то помешать компоненту сделать это? 

onValueChange = (ev) => {
    if( /^-?(\d+)?(\.\d*)?$/.test(ev.target.value)) {
        this.setState({ value: ev.target.value });
    }

Полный код: https://codepen.io/anon/pen/eoZOaE?editors=1000

1 Ответ

0 голосов
/ 05 апреля 2019

(не уверен, является ли эта тривиальная проверка Material-UI или HTML-нативной, но все равно не имеет значения)

Эта тривиальная проверка является собственной, поскольку компонент Material-UI InputBase передает только type='number' в собственную <input /> и не определяет никаких дополнительных проверок.

И, похоже, onchange событие, которое не запускается на каждом входе - это также поведение нативного ввода. Вы можете проверить это в этом примере: https://codesandbox.io/s/20z5qrnqq0?fontsize=14 - как вы можете видеть - onChange событие также запускается только для «допустимых» символов.

Я пытался найти другие решения с oninput событием HTML5, как было предложено здесь , но оно тоже не работает. Поэтому в этом случае я думаю, что вы принимаете правильное решение, используя вход type='text' для управления всеми возможными входами.

...