React: Для контролируемого ввода шаг не работает должным образом, если он не инициализирован с помощью null или "".

Созданный на 6 мар. 2018 · 6Комментарии · Источник: facebook/react

ОШИБКА

Каково текущее поведение?
Для input type = "number" шаг не работает должным образом, если установлено начальное значение. Кажется, что шаг выполняется, только если начальное значение равно "" или null.

Пример:
https://codepen.io/anon/pen/MQMBmX

В этом примере используется управляемое значение привязки ввода и шаг. Шаг составляет 1/10 от значения. Если вы измените значение в текстовом поле на 50000 и увеличите его с помощью степпера, оно увеличится до 50100 (то есть на начальное значение, а не на текущий шаг).

Измените код так, чтобы начальное значение было "" или null. Измените текстовое поле на 50000 и шагните вверх - значение станет 55000, как и ожидалось.

Какое поведение ожидается?
Должна существовать возможность визуализации числового ввода, учитывающего step, без необходимости сначала инициализировать значение входного компонента нулевым значением или "".

Кажется, что когда предоставляется начальное значение, он записывает атрибут значения в DOM (например, value = "100"). Когда начальное значение равно "" или null, в DOM записывается только атрибут value без присваивания. например (значение).

Какие версии React и какой браузер / ОС подвержены этой проблеме?

16.3.0-alpha.1 (перенесено в эту версию, чтобы убедиться, что проблема не исчезла)
0.14.7 (изначально в этой версии)

Кажется, влияет только на Chrome (подтвержденные Windows и Mac, версии 59 и 64). Ошибка не появляется в Safari (по крайней мере, на Mac).

DOM Bug

Источник

andyboyne

Самый полезный комментарий

Да. На самом деле мне интересно, должны ли мы вместе составить график по этому поводу.

nhunzaker 28 мар. 2018

👍3

Все 6 Комментарий

Я наблюдаю очень специфическое поведение этой скрипки как в Chrome 64 в Windows 10, так и в Firefox 52 в Debian. Если я введу 50000 в поле ввода, а затем сразу же щелкну стрелку вверх, я получу 50100. Если я введу 50000 во ввод, щелкните в любом месте документа, а затем щелкните стрелку вверх, я получу 55000.

nmain 6 мар. 2018

Вам не нужно менять значение, щелкните стрелку вверх несколько раз, и она начнет меняться на числа, которые не имеют смысла.

jmz7v 12 мар. 2018

Спасибо за отчет @andyboyne. Проблема возникает из-за того, что мы не обновляем атрибут value числовых входов, пока поле не станет размытым. Мы делаем это, чтобы избежать множества нежелательных действий, связанных с проверкой браузера. cc @nhunzaker.

Это должно быть решено, как только мы окончательно перестанем синхронизировать атрибут value для контролируемых входов https://github.com/facebook/react/issues/11896.

aweary 28 мар. 2018

Да. На самом деле мне интересно, должны ли мы вместе составить график по этому поводу.

nhunzaker 28 мар. 2018

👍3

Как уже упоминалось, это проблема синхронизации, поле синхронизируется, когда поле размыто.
Я добавил console.log и выяснил, что e.target.value и e.target.getAttribute ("value") не синхронизируются, пока поле не размыто.
Таким образом, обходной путь - добавить e.target.setAttribute ("значение", e.target.value); чтобы заставить обновить это значение, и тогда оно будет работать должным образом.

       onChange={e => {
        console.log("target" , e.target.value);
        console.log("getAttribute value",  e.target.getAttribute("value"));
        e.target.setAttribute("value",e.target.value); 
        this.setState({value: e.target.value, step: e.target.value / 10});
      }}