时间戳

首页 > 解决方案 > React 中输入元素的怪癖

javascript - React 中输入元素的怪癖

问题描述

我是 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} />

附加信息：

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

标签： javascripthtmlreactjs

解决方案

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

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

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

推荐阅读