在 formcontrol 中反应 bootstrap 只读输入

Question

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

但我想让在 FormControls 中生成的输入字段具有 readonly="readonly" 的属性。这样，此字段看起来与我的其他 FormControl 相同，但不会在 IOS 上提供键盘输入。

在我的例子中，输入将由日历选择器提供，该选择器将由弹出框触发。

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

非常感谢答案！

Answer 1

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

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

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

也许使用 'disabled' 对您的情况有帮助：

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

有关只读和禁用之间的区别，请参见此处：

我在 React 的 github 回购中创建了一个问题：#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) : "")}
/>

在 formcontrol 中反应 bootstrap 只读输入

react bootstrap readonly input within formcontrol

readonly-attribute

reactjs

form-control

react-bootstrap

更新