在React中，为什么可以保留输入

Question

在React中，当我有输入并且用户输入内容时，我会调用setState来保存它。我们知道，当状态发生变化时，组件将被重新渲染。

我的问题是在这种情况下，为什么重新渲染不会重置输入？根据我的理解，如果我们想保留输入，我们应该使用

<input type="text" value={ this.state.input } onChange={(e) => this.handle(e) }

我创建了jsfiddle

创建了另一个jsfiddle。现在，当用户输入任何内容时，className将被更改，因此绝对更改了dom树。但每次重新渲染后仍然没有重置输入

Answer 1

您所看到的是受控输入和非受控输入之间的区别。输入HTML元素本质上是有状态的，有或没有React，即它将保持输入的任何内容的值。这就是为什么我们渲染：

<input type='text' />

然后在输入中看到输入的内容，没有React的帮助。这是一个不受控制的组件，这意味着输入的值不受React控制。

如果我们在输入上设置一个值prop：

<input type='text' value='' />

然后输入的固有状态被值prop覆盖。在上面的示例中，它是一个不变的空字符串，因此输入中不会出现任何输入的字符。

因此，如果我们从您的第一个小提琴中获取代码：

<input type="text" onChange={ (e) => this.handle(e) } />

没有值prop prop，因此输入中显示的值来自HTML元素固有的有状态，而不是来自React。当组件重新渲染时，新状态和props与输入中显示的值无关 - 再次，因为此值来自HTML元素的状态，而不是来自React。