React: 入力フィールドのタイプと値を変更するときの警告

作成日 2016年04月08日  ·  13コメント  ·  ソース: facebook/react

私のrenderメソッドには次のようなものがあります

<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

これは予想される動作ですか?

Bug

最も参考になるコメント

バージョン16.4.1でも引き続き発生します

全てのコメント13件

小道具の変更を間違った順序で適用しているようです。 これを正しく行うためのロジックは、一般に(既知のタイプの場合)解決可能ですが、DOM操作を最小限に抑えたい場合は、完全にするために複雑になる可能性があります。

このコードでは、 <input>他の属性の前に常に.type設定する必要があるため、この特定のケースに問題があることに驚いています。

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/を呼び出し_updateDOMPropertiesがまだ呼び出されていないときに、入力の値を変更しようとします。要素type属性、したがって警告が生成されます。 _updateDOMPropertiesが呼び出されると、 typevalue前に設定されます。これは、想定どおりであり、すべてが計画どおりに進みます。

_ PS:もちろん、 switch case内のReactDOMInput.updateWrapperへの呼び出しを削除すると警告が削除されますが、要素type場合にも呼び出されることに気付いたため、他の場合にはこれが必要になる場合がありますtextarea 。_

値を設定せずに型の変更を確認するか、型を更新してからReactDOMInput.updateWrapper内に値を設定することができます。 また、 <input><textarea>ような場合になぜ電話が必要なのか疑問に思います

これは、問題を再現するより単純なケースです: https

numberからtext変更した場合にのみ発生するようです。 また、OS XのSafariまたはFirefoxで警告を再現することもできません。また、 ReactTestUtilsを使用しても警告が発生しないようです。

これはチェックするのに興味深いバグだったので、私はいくつかの突っ込みをしました。 私の最初の考えは、updateWrapperのvalue前にtypeを割り当てること

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 評価