web-dev-qa-db-fra.com

react bootstrap entrée en lecture seule dans formcontrol

J'utilise react bootstrap et ce framework fournit quelques Nice FormControls.

Mais je voudrais que le champ Input généré dans les FormControls ait un accessoire readonly = "readonly". De cette façon, ce champ ressemble à mes autres FormControls, mais ne donne pas d'entrée de clavier sur IOS.

Dans mon cas, l'entrée sera fournie par un sélecteur de calendrier qui sera déclenché par un popover.

Est-ce que quelqu'un sait comment donner à FormControl le paramètre readonly = "readonly", afin que le champ d'entrée généré dans le navigateur ait le prop readonly = "readonly"?

Merci beaucoup pour les réponses!

reactjsreact-bootstrapform-controlreadonly-attribute
14
user3611459

Cela ne ressemble pas à un problème avec react-bootstrap, mais plutôt avec react lui-même. React ne transfère pas le prop 'readonly' à l'élément DOM (réel) généré:

React-bootstrap crée l'entrée dom virtuelle React suivante: enter image description here

Pourtant, react a généré l'élément DOM réel suivant, en omettant l'attribut readonly: enter image description here

Peut-être que l'utilisation de "désactivé" pourrait vous aider dans votre cas:

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

Pour les différences entre lecture seule et désactivée, voir ici: https://stackoverflow.com/a/7730719/1415921

J'ai créé un problème dans le dépôt github de React: # 678

[~ # ~] mise à jour [~ # ~]

Après avoir obtenu une réponse dans le problème ci-dessus. Vous devez l'écrire avec camelcase: readOnly.

Il devrait donc être:

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