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

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

提问by Alexander Suraphel

Initially I had:

最初我有：

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

which was readonly.

这是只读的。

changing it to:

将其更改为：

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

made it accept input from keyboard. Why does this happen?

使其接受来自键盘的输入。为什么会发生这种情况？

回答by Michelle Tilley

The example you list is not read-only. See this JSFiddle: http://jsfiddle.net/BinaryMuse/13sbw3dy/

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

If you add a value={whatever}property to the input, which makes it a controlled component, thenit is read-only uness you add an onChangehandler that updates the value of whatever. From the React docs:

如果您value={whatever}向输入添加一个属性，使其成为受控组件，那么它是只读的，除非您添加一个onChange处理程序来更新 的值whatever。来自React 文档：

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 initializedwith the value, Untitled. When the user updates the input, the node's value propertywill 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 alwaysbe Untitled.

为什么是受控组件？

<input>在 React 中使用表单组件提出了编写传统表单 HTML 时不存在的挑战。例如，在 HTML 中：

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

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

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

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

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

回答by prudhvi seeramreddi

In react, the component render's only when the state changes. Whenever the state of the component changes, then the corresponding component render. That means we are updating virtual DOM with new value and attach it to the main DOM. That's how react works.

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

In the case of input text fields the value of the text fields changes only when the user enter some value. In this case we are not updating any state, we are adding new value to "value" property of the text field. So the react wont render anything and new value is not added to the DOM. Here we are violating react behavior. So the react wont allow us to edit the input text fields.

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

In order to the get the smooth flow of the react, it allow us to use on change call back function in-order to set the state. On changing the value of the text filed, state set's with the new value so the react render and the DOM updated with the new value.

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

Instead of using call back function, we can use valuelink property to add value to input text. like:

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

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

For value link, we have to give state value instead of variable value. For complete understanding please refer: https://facebook.github.io/react/docs/two-way-binding-helpers.html

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

whenever we enter the text in text box, the state get updated and the value of the input text set to state value.

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