在表单控件中反应引导程序只读输入

问题描述

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

I am using react bootstrap and this framework provides some nice FormControls.

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

But I would like to make the Input field that is generated within the FormControls to have a prop of readonly="readonly". This way, this field looks the same as my other FormControls, but does not give a keyboard input on IOS.

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

In my case, the input will be provided by a calendar picker which will be triggered by an popover.

有谁知道怎么给FormControl参数readonly="readonly"，让浏览器中生成的Input字段有propreadonly="readonly"?

Does anyone know how to give FormControl the parameter readonly="readonly", so that the generated Input field in the browser will have the prop readonly="readonly"?

非常感谢答案！

推荐答案

这看起来不像是 react-bootstrap 的问题，而是 react 本身的问题.React 不会将 'readonly' prop 传输到生成的(真实的)DOM 元素:

It doesn't look like a problem with react-bootstrap, but rather with react itself.React is not transferring the 'readonly' prop to the generated (real) DOM element:

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

React-bootstrap create the following react virtual dom input:

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

Yet, react generated the following real DOM element, omitting the readonly attribute:

也许在您的情况下使用禁用"可能会有所帮助:

Maybe using 'disabled' could help in your case:

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

对于 readonly 和禁用见这里:https://stackoverflow.com/a/7730719/1415921

For differences between readonly & disbabled see here:https://stackoverflow.com/a/7730719/1415921

我在 React 的 github 存储库中创建了一个问题:#6783

I have created an issue in React's github repo: #6783

在得到上述问题的答案后.你需要用驼峰写法:只读.

After getting an answer in the above issue. You need to write it with camelcase: readOnly.

所以应该是:

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

这篇关于在表单控件中反应引导程序只读输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！