为什么 react 将输入[类型=“文本”] 字段设为只读，除非我提供 onChange 回调

Why does react make input[type="text"] fields readonly unless I supply onChange callback?

本文关键字：只读 非我 回调 onChange 字段 输入 react 类型 文本 为什么      更新时间：2023-09-26

最初我有： 

<input type="text"id="requested" name="requested" ref="requested"   />

这是只读的。

将其更改为：

<input type="text" onChange={function() {}} id="requested" name="requested" ref="requested" />

使其接受来自键盘的输入。为什么会这样？

您列出的示例不是只读的。请参阅此 JSFiddle： http://jsfiddle.net/BinaryMuse/13sbw3dy/

如果将 value={whatever} 属性添加到输入中，使其成为受控组件，则添加更新 whatever 值的 onChange 处理程序是只读的。来自 React 文档：

为什么选择受控组件？

在 React 中使用表单组件（如 <input>）带来了编写传统表单 HTML 时所没有的挑战。例如，在 HTML 中：

<input type="text" name="title" value="Untitled" />

这将呈现使用值初始化的输入，Untitled .当用户更新输入时，节点的值属性将更改。但是，node.getAttribute('value')仍将返回初始化时使用的值，Untitled .

与 HTML 不同，React 组件必须表示视图在任何时间点的状态，而不仅仅是在初始化时。例如，在 React 中：

render: function() {
  return <input type="text" name="title" value="Untitled" />;
}

由于此方法描述任何时间点的视图，因此文本输入的值应始终Untitled 。

在 react 中，组件仅在状态更改时才呈现。每当组件的状态发生变化时，相应的组件就会呈现。这意味着我们正在用新值更新虚拟 DOM，并将其附加到主 DOM。这就是反应的工作原理。

对于输入文本字段

，文本字段的值仅在用户输入某个值时更改。在这种情况下，我们不更新任何状态，而是向文本字段的"value"属性添加新值。所以反应不会渲染任何东西，新值也不会添加到 DOM 中。在这里，我们违反了反应行为。因此，反应不允许我们编辑输入文本字段。

为了获得反应的平滑流程，它允许我们使用更改回调函数来设置状态。在更改提交的文本的值时，状态集与新值一起设置，以便反应渲染和 DOM 使用新值更新。

我们可以使用 valuelink 属性为输入文本添加值，而不是使用回调函数。 喜欢：

getInitialState: function(){
  return {
    value:'' //for empty text value
  }
}

对于值链接，我们必须给出状态值而不是变量值。为了完全理解，请参考： https://facebook.github.io/react/docs/two-way-binding-helpers.html

每当我们在文本框中输入文本时，状态都会更新，输入文本的值设置为状态值。

相关文章：