除非我提供onChange回调,为什么反应会使输入[type ="text"]字段只读？

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.来自React文档:

为何选择受控组件？

使用<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.

Answer 2

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

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

为了使反应顺利进行，它允许我们使用更改回调函数来设置状态。在更改文本字段的值时，状态集会使用新值，以便反应渲染和 DOM 使用新值进行更新。

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

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

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

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