web-dev-qa-db-fra.com

appeler l'événement onChange après avoir appuyé sur la touche Entrée

Je suis nouveau à Bootstrap et collé avec ce problème. J'ai un champ de saisie et dès que je n'entre qu'un chiffre, la fonction de onChange est appelée, mais je souhaite qu'elle soit appelée lorsque j'appuie sur 'Enter' lorsque le nombre entier a été entré. Le même problème pour la fonction de validation - il appelle trop tôt.

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
  //bsStyle: this.validationInputFactor(),
  placeholder: this.initialFactor,
  className: "input-block-level",
  onChange: this.handleInput,
  block: true,
  addonBefore: '%',
  ref:'input',
  hasFeedback: true
});
javascripttwitter-bootstrapreactjs
161
Bill Lumbert

Selon React Doc , vous pouvez écouter des événements au clavier, tels que onKeyPress ou onKeyUp, pas onChange.

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

Mise à jour: Utiliser React.Component

Voici le code utilisant React.Component qui fait la même chose

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

Voici le jsfiddle .

331
wuct

Vous pouvez utiliser onKeyPress directement sur le champ de saisie. La fonction onChange change la valeur d'état à chaque changement de zone de saisie et, après avoir appuyé sur la touche Entrée, la fonction recherchera une recherche ().

<input
    type="text"
    placeholder="Search..."
    onChange={event => {this.setState({query: event.target.value})}}
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.search()
                }
              }}
/>
31
Admir

en appuyant sur Entrée lorsque le focus sur un contrôle de formulaire (entrée) déclenche normalement un événement submit (onSubmit) sur le formulaire lui-même (et non sur l'entrée) afin que vous puissiez lier votre this.handleInput au formulaire onSubmit.

Vous pouvez également le lier à l'événement blur (onBlur) sur input, ce qui se produit lorsque le focus est supprimé (par exemple, en passant à l'élément suivant qui peut l'être).

21
Luca

Vous pouvez utiliser event.key

function Input(props) {
  return (
    <div>
      Input
      <input type="text" onKeyPress={props.onKeyPress}/>
    </div>
  )
}

class Form extends React.Component {
  constructor(props) {
    super(props)

    this.handleKeyPress = this.handleKeyPress.bind(this)
  }

  handleKeyPress(event) {
    if (event.key === 'Enter') {
      console.log('enter key pressed')
    }
  }

  render() {
    return (
      <section>
        <Input onKeyPress={this.handleKeyPress}/>
        <Output value={this.state.output}/>
      </section>
    );
  }
}
4
onmyway133

Réagissez aux utilisateurs, voici une réponse pour l’exhaustivité.

Réagissez version 16.4.2

Vous souhaitez mettre à jour chaque frappe ou obtenir la valeur uniquement lors de l'envoi. L'ajout d'événements clés au composant fonctionne, mais il existe des alternatives recommandées dans la documentation officielle.

Composants contrôlés vs non contrôlés

Contrôlé

À partir de Docs - Formulaires et composants contrôlés :

En HTML, les éléments de formulaire tels que input, textarea et select conservent généralement leur propre état et le mettent à jour en fonction des entrées de l'utilisateur. Dans React, l'état mutable est généralement conservé dans la propriété state des composants et mis à jour uniquement avec setState ().

Nous pouvons combiner les deux en faisant de l’état React, la "source unique de la vérité". Ensuite, le composant React qui rend un formulaire contrôle également ce qui se passe dans ce formulaire lors de la saisie ultérieure de l'utilisateur. Un élément de formulaire en entrée dont la valeur est contrôlée par React est appelé "composant contrôlé".

Si vous utilisez un composant contrôlé, vous devrez maintenir l'état mis à jour pour chaque modification de la valeur. Pour ce faire, vous liez un gestionnaire d’événements au composant. Dans les exemples de documentation, généralement l'événement onChange.

Exemple:

1) Gestionnaire d’événements Bind dans le constructeur (valeur conservée dans l’état)

constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
}

2) Créer une fonction de gestionnaire

handleChange(event) {
    this.setState({value: event.target.value});
}

3) Créer une fonction d'envoi de formulaire (la valeur provient de l'état)

handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
}

4) rendu

<form onSubmit={this.handleSubmit}>
    <label>
      Name:
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    </label>
    <input type="submit" value="Submit" />
</form>

Si vous utilisez des composants contrôlés , votre fonction handleChange sera toujours activée, afin de mettre à jour et de conserver le bon état. L'état aura toujours la valeur mise à jour et, lorsque le formulaire sera soumis, la valeur sera extraite de l'état. Cela peut être un inconvénient si votre fiche est très longue, car vous devrez créer une fonction pour chaque composant ou en écrire une simple qui gère le changement de valeur de chaque composant.

Non contrôlé

Depuis le Docs - Composant non contrôlé

Dans la plupart des cas, nous vous recommandons d'utiliser des composants contrôlés pour implémenter des formulaires. Dans un composant contrôlé, les données de formulaire sont gérées par un composant React. L'alternative est les composants non contrôlés, où les données de formulaire sont gérées par le DOM lui-même.

Pour écrire un composant non contrôlé, au lieu d'écrire un gestionnaire d'événements pour chaque mise à jour d'état, vous pouvez utiliser une référence pour obtenir des valeurs de formulaire à partir du DOM.

La principale différence ici est que vous n'utilisez pas la fonction onChange, mais plutôt le onSubmit du formulaire pour obtenir les valeurs et valider si nécessaire.

Exemple:

1) Lier le gestionnaire d’événements et créer la référence à l’entrée dans le constructeur (aucune valeur conservée dans l’état)

constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
}

2) Créer une fonction d'envoi de formulaire (la valeur provient du composant DOM)

handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
}

3) rendu

<form onSubmit={this.handleSubmit}>
    <label>
      Name:
      <input type="text" ref={this.input} />
    </label>
    <input type="submit" value="Submit" />
</form>

Si vous utilisez des composants non contrôlés , il n'est pas nécessaire de lier une fonction handleChange. Lorsque le formulaire est soumis, la valeur est extraite du DOM et les validations nécessaires peuvent être effectuées à ce stade. Il n'est pas nécessaire de créer des fonctions de gestionnaire pour aucun des composants d'entrée.

Votre problème

Maintenant, pour votre question:

... je veux qu'on l'appelle quand j'appuie sur 'Enter quand tout le numéro a été entré

Si vous voulez y parvenir, utilisez un composant non contrôlé. Ne créez pas les gestionnaires onChange si cela n'est pas nécessaire. La touche enter soumettra le formulaire et la fonction handleSubmit sera déclenchée.

Changements que vous devez faire:

Supprimer l'appel onChange dans votre élément

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
    //    bsStyle: this.validationInputFactor(),
    placeholder: this.initialFactor,
    className: "input-block-level",
    // onChange: this.handleInput,
    block: true,
    addonBefore: '%',
    ref:'input',
    hasFeedback: true
});

Manipulez le formulaire et validez votre saisie. Vous devez obtenir la valeur de votre élément dans la fonction de soumission du formulaire, puis valider. Assurez-vous de créer la référence à votre élément dans le constructeur.

  handleSubmit(event) {
      // Get value of input field
      let value = this.input.current.value;
      event.preventDefault();
      // Validate 'value' and submit using your own api or something
  }

Exemple d'utilisation d'un composant non contrôlé:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    // bind submit function
    this.handleSubmit = this.handleSubmit.bind(this);
    // create reference to input field
    this.input = React.createRef();
  }

  handleSubmit(event) {
    // Get value of input field
    let value = this.input.current.value;
    console.log('value in input field: ' + value );
    event.preventDefault();
    // Validate 'value' and submit using your own api or something
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);
1
c-chavez

Vous pouvez aussi écrire une petite fonction wrapper comme celle-ci

const onEnter = (event, callback) => event.key === 'Enter' && callback()

Puis consommez-le sur vos entrées

<input 
    type="text" 
    placeholder="Title of todo" 
    onChange={e => setName(e.target.value)}
    onKeyPress={e => onEnter(e, addItem)}/>
0
David Alsh