在formcontrol中反应引导只读输入答案

【问题标题】：react bootstrap readonly input within formcontrol在formcontrol中反应引导只读输入
【发布时间】：2016-09-12 05:23:18
【问题描述】：

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

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

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

有谁知道如何给 FormControl 提供参数 readonly="readonly"，这样在浏览器中生成的 Input 字段就会有 prop readonly="readonly"？

非常感谢答案！

【问题讨论】：

What have you tried so far? 请edit 您的问题显示您遇到问题的代码的minimal reproducible example，然后我们可以尝试帮助解决具体问题。您还应该阅读How to Ask。

标签： reactjs react-bootstrap form-control readonly-attribute

【解决方案1】：

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

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

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

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

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

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

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

更新

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

应该是这样的：

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

【讨论】：

只有在某些情况下才可以只读，如果不是，则需要处理更改
@omerts 但是你回答的方式，在所有情况下都是只读的？
@joedotnot 你可以使用它：readOnly={false} ||只读={true}
@omerts。不，不存在 readOnly= true/false; 之类的东西。如果它存在，则假定它是只读的！你可以有 readOnly="whatevs", readonly="true", readOnly="false" 都意味着同样的事情。
@omerts 是的，你 100% 正确，它有效！现在这将是我和其他人必须记住的事情。 "false" 和 {false} 的行为不同 - 这是完全出乎意料的（我认为图书馆允许这样做很糟糕）

【解决方案2】：

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

例子：

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

【讨论】：