React: 更改输入字段的类型和值时发出警告

看起来我们正在按错误顺序应用属性更改。 通常，对于已知类型，解决此问题的逻辑是可以解决的，但是如果我们想最小化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/

在Chrome调试器之后，我发现了这一点：
有这行代码， https://github.com/facebook/react/blob/master/src/renderers/dom/shared/ReactDOMComponent.js#L829 ，然后调用https://github.com/ facebook / react / blob / master / src / renderers / dom / client / wrappers / ReactDOMInput.js＃L221 ，然后尝试更改输入的值，而尚未调用_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接手这很酷。

完成于https://github.com/facebook/react/pull/7333

版本16.4.1仍然会发生