小编典典

为什么除非我提供onChange回调,否则react会将input [type =“ text”]字段设为只读?

reactjs

最初我有:

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

这是 只读的

更改为:

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

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


阅读 259

收藏
2020-07-22

共1个答案

小编典典

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

如果您value={whatever}在输入中添加一个属性,使其成为受控组件, 那么 除非您添加一个onChange用于更新的值的处理程序,
否则 它是只读的whatever。从React
docs

为什么使用受控组件?

<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

2020-07-22