为什么 react 使 input[type="text"] 字段只读，除非我提供 onChange 回调？

Question

最初我有：

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

这是只读。

将其更改为：

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

让它接受键盘输入。为什么会这样？

Answer 1

您列出的示例不是只读的。看到这个 JSFiddle：http://jsfiddle.net/BinaryMuse/13sbw3dy/

如果在输入中添加 value={whatever} 属性，使其成为受控组件，然后它是只读的，除非您添加onChange 更新 whatever 值的处理程序。来自 the React docs:

Why Controlled Components?

Using form components such as <input> in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:
<input type="text" name="title" value="Untitled" />
This renders an input initialized with the value, Untitled. When the user updates the input, the node's value property will change. However, node.getAttribute('value') will still return the value used at initialization time, Untitled.

Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:
render: function() {
  return <input type="text" name="title" value="Untitled" />;
}
Since this method describes the view at any point in time, the value of the text input should always be Untitled.

Answer 2

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

在输入文本字段的情况下，文本字段的值仅在用户输入某些值时发生变化。在这种情况下，我们没有更新任何状态，我们正在向文本字段的 "value" 属性添加新值。所以反应不会渲染任何东西并且新值不会添加到 DOM。这里我们违反了反应行为。所以反应不允许我们编辑输入文本字段。

为了获得流畅的反应流程，它允许我们使用更改回调函数来设置状态。在更改文本字段的值时，状态设置为新值，因此反应渲染和 DOM 更新为新值。

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

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

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

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

为什么 react 使 input[type="text"] 字段只读，除非我提供 onChange 回调？

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

javascript

reactjs