J'ai un composant Input
avec un bouton (propriété buttonAfter
), je définis un gestionnaire onClick
associé au bouton et ainsi l'utilisateur peut taper du texte et cliquer sur le bouton pour déclencher l'action appropriée.
Cependant, je voudrais que l'utilisateur puisse appuyer sur la touche [Enter]
(keycode 13) pour obtenir le même effet que cliquer sur le bouton, juste pour rendre l'interface utilisateur plus facile à utiliser.
Je ne pouvais pas trouver un moyen de le faire, bien sûr, j'ai essayé onKeydown
d'enregistrer un gestionnaire pour l'événement clé en bas, mais c'est simplement ignoré.
Je pense que cette question est liée à React lui-même au lieu de react-bootstrap.
Regardez ceci pour quelques notions de base sur le système d’événements React: https://facebook.github.io/react/docs/events.html
Lorsque vous utilisez onKeyDown, onKeyPress ou onKeyUp React transmettra à votre gestionnaire une instance d'objet "cible" avec les propriétés suivantes:
booléen altKey
nombre charCode
... (pour tous voir le lien ci-dessus)
Donc, vous pouvez faire quelque chose comme ça:
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'react-bootstrap';
class TestInput extends React.Component {
handleKeyPress(target) {
if(target.charCode==13){
alert('Enter clicked!!!');
}
}
render() {
return (
<Input type="text" onKeyPress={this.handleKeyPress} />
);
}
}
ReactDOM.render(<TestInput />, document.getElementById('app'));
J'ai testé le code ci-dessus et cela fonctionne. J'espère que cela vous sera utile.
La question peut également être liée à React-bootstrap. React-bootstrap a également un moyen de gérer l’instance chaque fois qu’un bouton, une touche Entrée ou un élément de formulaire est enfoncé.
Le code ci-dessous explique comment gérer une instance lorsque l’on appuie sur enterkey sans l’implication de React Handlers (ce qui le rend cool).
import React from "react";
import ReactDOM from "react-dom";
import { FormGroup, FormControl } from "react-bootstrap";
class TestInput extends Component {
search() {
console.log("Enter Button Pressed");
}
render() {
return (
<FormGroup>
<InputGroup>
<FormControl
placeholder="Press Enter"
type="input"
onKeyPress={event => {
if (event.key === "Enter") {
this.search();
}
}}
/>
</InputGroup>
</FormGroup>
);
}
}
React Bootstrap ne prend plus en charge l'élément de formulaire d'entrée. Au lieu de cela il a présenté ci-dessous les éléments à votre disposition
Le composant FormGroup encapsule un contrôle de formulaire avec un espacement correct, ainsi que la prise en charge d'une étiquette, d'un texte d'aide et d'un état de validation.
Enveloppez votre contrôle de formulaire dans un InputGroup, puis utilisez-le pour les add-ons normaux et pour les add-ons de boutons.
Le composant FormControl rend un contrôle de formulaire avec un style Bootstrap.
Références:
https://react-bootstrap.github.io/components.html#formshttps://react-bootstrap.github.io/components.html#forms-input-groups
Uncaught TypeError: Impossible de lire la propriété 'charCode' de non définie
Vous devez utiliser:
handleKeyPress(target) {
if (target.key === 'Enter') {
alert('Enter clicked!!!');
}
}