web-dev-qa-db-fra.com

Entrez le gestionnaire d'événements de clé sur le composant d'entrée de react-bootstrap

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é.

reactjsreact-bootstrap
19
mguijarr

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.

40
baudo2048

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

8
aash20

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!!!');
  }
}
0
Hello Earth