在formcontrol中反应bootstrap readonly输入

Question

我正在使用react bootstrap，这个框架提供了一些不错的FormControls。

但是我想使FormControls中生成的Input字段具有readonly =＆＃34; readonly＆＃34;的支柱。这样，此字段看起来与我的其他FormControls相同，但不在IOS上提供键盘输入。

在我的情况下，输入将由日历选择器提供，该选择器将由弹出窗口触发。

有没有人知道如何为FormControl提供参数readonly =＆＃34; readonly＆＃34;，以便浏览器中生成的输入字段将具有readonly =＆＃34; readonly＆＃34;？

许多thnx的答案！

Answer 1

它看起来不像react-bootstrap的问题，而是反应本身。 React没有将'readonly'道具转移到生成的（真实）DOM元素：

React-bootstrap创建以下反应虚拟dom输入：

然而，react生成了以下真正的DOM元素，省略了readonly属性：

在你的情况下，使用'禁用'可能有所帮助：

<FormControl
   disabled
   type="text"
   placeholder="Enter text"
   onChange={this.handleChange}
 />

对于readonly和amp;之间的差异不管怎么看这里： https://stackoverflow.com/a/7730719/1415921

我在React的github repo中创建了一个问题：#6783

<强> 更新

在上述问题得到答案后。你需要用camelcase编写它：readOnly。

所以它应该是：

<FormControl
   readOnly
   type="text"
   placeholder="Enter text"
   onChange={this.handleChange}
 />

Answer 2

旧问题，新方法：利用onChange事件来控制是否调用handleChange事件。我将editForm定义为由按钮控制的props值，以查看我是否处于查看或编辑模式。

示例：

<TextField
        name="id"
        label="ID
        value={entityState.entity.Id || ""}
        onChange={(a) => (props.formEdit ? handleChange(a) : "")}
/>