web-dev-qa-db-ja.com

react bootstrap formcontrol内の読み取り専用入力

私は反応bootstrapを使用しており、このフレームワークはいくつかの素晴らしいFormControlsを提供します。

しかし、FormControls内で生成されるInputフィールドのプロパティをreadonly = "readonly"にしたいと思います。このように、このフィールドは他のFormControlと同じように見えますが、IOSでキーボード入力を提供しません。

私の場合、入力はポップオーバーによってトリガーされるカレンダーピッカーによって提供されます。

誰もがFormControlにパラメータreadonly = "readonly"を与える方法を知っているので、ブラウザで生成された入力フィールドにはprop readonly = "readonly"がありますか？

答えはたくさんあります！

reactjsreact-bootstrapform-controlreadonly-attribute
14
user3611459

React-bootstrapの問題ではなく、react自体の問題のように見えます。 Reactは 'readonly' propを生成された（実際の）DOM要素に転送していません：

React-bootstrapは、次の反応仮想dom入力を作成します。 enter image description here

ただし、reactは次の実際のDOM要素を生成し、readonly属性を省略しました： enter image description here

「無効」を使用すると、あなたの場合に役立つかもしれません：

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

読み取り専用と無効化の違いについては、こちらを参照してください： https://stackoverflow.com/a/7730719/1415921

Reactのgithubリポジトリに問題を作成しました： ＃678

[〜＃〜] update [〜＃〜]

上記の問題の答えを得た後。キャメルケース：readOnlyで記述する必要があります。

したがって、次のようになります。

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