私の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+)?
これは予想される動作ですか?
小道具の変更を間違った順序で適用しているようです。 これを正しく行うためのロジックは、一般に(既知のタイプの場合)解決可能ですが、DOM操作を最小限に抑えたい場合は、完全にするために複雑になる可能性があります。
このコードでは、 <input>
他の属性の前に常に.type
設定する必要があるため、この特定のケースに問題があることに驚いています。
それが設計どおりに機能しない理由がわかりません。 タイプを最初に設定することで常にこのようなケースが解決されるのか、タイプを最初に設定するだけで他の方法に切り替えたときに同じ警告が発生するのかは、私には完全にはわかりません。
(#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
が呼び出されると、 type
はvalue
前に設定されます。これは、想定どおりであり、すべてが計画どおりに進みます。
_ 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がこれを採用するのはかなりクールです。
バージョン16.4.1
でも引き続き発生します
最も参考になるコメント
バージョン
16.4.1
でも引き続き発生します