最初我有:
<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}在输入中添加一个属性,使其成为受控组件, 那么 除非您添加一个onChange用于更新的值的处理程序, 否则 它是只读的whatever。从React docs:
value={whatever}
onChange
whatever
为什么使用受控组件? <input>在React中使用表单组件(例如在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。
为什么使用受控组件?
<input>在React中使用表单组件(例如在React中)提出了在编写传统表单HTML时不存在的挑战。例如,在HTML中:
<input>
<input type="text" name="title" value="Untitled" />
这将呈现一个以值 初始化 的输入Untitled。当用户更新输入时,节点的value 属性 将更改。但是,node.getAttribute('value')仍会返回初始化时使用的值Untitled。
Untitled
node.getAttribute('value')
与HTML不同,React组件必须在任何时间点(不仅在初始化时)代表视图的状态。例如,在React中:
render: function() { return <input type="text" name="title" value="Untitled" />; }
由于此方法在任何时间点都描述了视图,因此文本输入的值应 始终 为Untitled。