reactjs - 在formcontrol中反应引导只读输入

Question

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

但我想让 FormControls 中生成的 Input 字段具有 readonly="readonly" 的属性。这样，这个字段看起来和我的其他 FormControls 一样，但在 IOS 上没有给出键盘输入。

就我而言，输入将由日历选择器提供，该选择器将由弹出框触发。

有谁知道如何给 FormControl 参数 readonly="readonly"，以便在浏览器中生成的 Input 字段将具有 prop readonly="readonly"？

许多thnx的答案！

Answer 1

它看起来不像 react-bootstrap 的问题，而是 react 本身的问题。React 不会将 'readonly' 属性传递给生成的（真实的）DOM 元素：

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

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

也许使用“禁用”可以帮助你的情况：

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

有关只读和禁用之间的区别，请参见此处： https ://stackoverflow.com/a/7730719/1415921

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

---

更新

在得到上述问题的答案后。你需要用驼峰写法：readOnly。

所以应该是：

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

Answer 2

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

例子：

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