React: Предупреждение при изменении типа и значения поля ввода

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

В моем методе рендеринга есть что-то вроде

<input type={dynamicTypeValue} value={dynamicValue} />

Если я сначала визуализирую этот ввод как число (например, dynamicTypeValue = 'number'; dynamicValue = 5 ), но затем изменю ввод на строку: ( dynamicTypeValue = 'string'; dynamicValue = '01/01/2016' ), я получаю предупреждение
что новое значение не является допустимым числом:

The specified value "01/01/2000" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?
DOMPropertyOperations.js:142 The specified value "01/01/2012" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

screen shot 2016-04-07 at 6 07 45 pm

Это ожидаемое поведение?

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

По-прежнему происходит с версией 16.4.1

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

Похоже, мы применяем изменения опоры в неправильном порядке. Логика получения этого права в целом разрешима (для известных типов), но может быть сложно добиться совершенства, если мы хотим минимизировать операции DOM.

Я удивлен, что этот конкретный случай проблематичен, потому что этот код должен гарантировать, что мы всегда устанавливаем .type перед любыми другими атрибутами в <input> :

https://github.com/facebook/react/blob/0b1fd186855a48dff78987f13466cec1e579b78c/src/renderers/dom/client/wrappers/ReactDOMInput.js#L74

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

(См. Также # 2242, это то, что мы можем захотеть реализовать, но может быть трудно реализовать в текущей системе. Это было проще, когда у нас были полные составные оболочки для этих компонентов, но мы их больше не делаем. изменения типа могут быть неожиданными, потому что это будет означать, что ссылка на этот компонент изменяется в течение времени жизни компонента, чего у нас никогда не было в другом месте.)

Самый простой обходной путь здесь - установить key на входе, который изменяется вместе с типом, чтобы при изменении типа создавался новый элемент ввода.

Может быть вызвано ошибкой порядка Object.assign V8? Или это было до 15?

@gaearon это все еще в 15 выпуске

@gurinderhans Какой браузер? Кроме того, можете ли вы предоставить jsfiddle, демонстрирующий проблему?

@jimfb Вот и все.
Браузер: Chrome 50.0.2661.86 (64-бит)
JSFiddle: https://jsfiddle.net/mb90na04/1/

После хромового отладчика я обнаружил следующее:
Вот эта строка кода, https://github.com/facebook/react/blob/master/src/renderers/dom/shared/ReactDOMComponent.js#L829 , которая после вызывает https://github.com/ facebook / response / blob / master / src / renderers / dom / client / wrappers / ReactDOMInput.js # L221, а затем значение ввода пытаются изменить, пока _updateDOMProperties еще не был вызван для обновления атрибут элемента type , таким образом генерируется предупреждение. После вызова _updateDOMProperties type устанавливается перед value , как и предполагалось, и все идет по плану.

_ PS: Конечно, удаление вызова ReactDOMInput.updateWrapper внутри switch case снимает предупреждение, но это может потребоваться в некоторых других случаях, поскольку я также заметил, что он вызывается, если элемент type - это textarea ._

Вы можете проверить изменение типа, а не установить значение или тип обновления, а затем установить значение внутри ReactDOMInput.updateWrapper . Мне также интересно, почему вызов требуется для таких случаев, как <input> или <textarea>

Вот более простой случай, воспроизводящий проблему: https://jsfiddle.net/97gr5e65/1/

Кажется, это происходит только при изменении с number на text . Я также не могу воспроизвести предупреждение в Safari или Firefox на OS X. Также, похоже, не возникает при использовании ReactTestUtils .

Это была интересная ошибка, поэтому я немного покопался. Моя первоначальная мысль заключалась в том, чтобы просто назначить type перед value в updateWrapper. Это нормально?

https://github.com/facebook/react/compare/master...nhunzaker : nh-input-change-fix? expand = 1

Устраняет ошибку, но это слишком просто. Это кажется мелким. Что вы думаете?

Можем ли мы переместить вызовы .updateWrapper ниже вызова _updateDOMChildren (отделив их от вызовов getNativeProps)? Я думаю, что это лучшее решение, и похоже, оно должно работать.

Да. Я также смог получить тестовое покрытие по этому поводу. Значение аннулируется DOM, когда тип изменяется так, что значение больше недействительно, или если назначено новое значение, которое недействительно.

Вне связи, довольно круто, что JSDOM подхватывает это.

Совершено на https://github.com/facebook/react/pull/7333

По-прежнему происходит с версией 16.4.1

Была ли эта страница полезной?
0 / 5 - 0 рейтинги