javascript - React 中输入元素的怪癖

Question

我是 React 新手，如果我的问题很琐碎，请见谅。

在 React 中，如果我写:

<input value="" />

然后它将是一个只读字段，React 强制我添加一个 onChange 处理程序:

<input value={this.state.greeting} onChange={this.handleChange} />

哪里handleChange()更新组件的 state.greeting ，因此值也会更新

以下是我的问题:

Q1-为什么 <input value="" />在纯 html 中不是只读的，但在 React 中是只读的？ React 是如何让它变成只读的

Q2-我发现如果我写下面的代码也可以，输入不是只读的

<input onChange={this.handleChange} />

而且这种方法不是更好更简洁吗？因为内部值会在浏览器中自动更新，所以我们不需要包含 value 属性来从状态中读取数据，这在大多数情况下是不必要的，所以为什么我总是看到这样的代码:

<input value={this.state.greeting} onChange={this.handleChange} />

附加信息:

有人说是受控的表单元素需要有value属性，但是为什么我们需要有一个value属性来读取state呢？当我们在输入中输入 sth 时，onChange 处理程序已经更新了状态，所以它仍然是受控的。

Answer 1

要了解 React 如何使您的标签只读，您需要研究在您端运行的源代码和/或查看生成的 HTML。如果仍然不确定，那么您可能希望将您的第一个问题发送给该工具的作者。

状态不在服务器上，除非你正在轮询或做类似的事情。它也在您的浏览器中。 value 属性指定 HTML 元素的初始值，也就是说，在您执行任何操作之前，您的标记将具有一个值。在您的情况下，您的标签由 React 控制，但您需要对其进行初始化。好处:

• 你会得到初始值
• 您将拥有更易读的代码
• 您的代码将以 React 方式编写，因此您无需担心不愉快的意外