à l'appel de l'événement onChange après avoir appuyé sur la touche Enter

Selon Réagir Doc, vous pouvez écouter les événements de clavier, comme 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: Utilisation De Réagir.Composant

Voici le code à l'aide de Réagir.Composant 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} />
  }
}

Ici est la jsfiddle.

appuyant sur Entrer lorsque le focus sur un contrôle de formulaire (input) normalement déclenche une submit (onSubmit) de l'événement sur le formulaire lui-même (pas d'entrée) de sorte que vous pouvez lier votre this.handleInput à la forme onSubmit.

Sinon, vous pouvez le lier à la blur (onBlur) de l'événement sur la input qui se produit lorsque la mise au point est retiré (p. ex. surbrillance l'élément suivant que vous pouvez obtenir la mise au point)

Réagir utilisateurs, voici une réponse à l'exhaustivité.

Réagir la version 16.4.2

Vous souhaitez mettre à jour pour chaque frappe de touche, ou d'obtenir la valeur uniquement à soumettre. L'ajout de la clé des événements pour le composant fonctionne, mais il existe des alternatives, comme recommandé dans les docs officielles.

Contrôlée vs non contrôlée des composants

Contrôlé

De la Docs - Formes et les composants commandés:

En HTML, les éléments de formulaire, tels que les input, textarea, et sélectionnez généralement
maintenir leur propre état et de la mettre à jour en fonction de l'entrée utilisateur. Dans De Réagir,
mutable état est généralement conservés dans la propriété de l'état des composants,
et seulement mis à jour avec setState().

On peut combiner les deux en faisant la Réagir état d'être la “source unique
de la vérité”. Puis la Réagir composant qui effectue le rendu d'un formulaire de contrôle également
ce qui se passe sous cette forme sur les entrées de l'utilisateur. Un formulaire de saisie
élément dont la valeur est contrôlée par Réagir de cette façon est appelé un
“contrôlée composant”.

Si vous utilisez un composant contrôlé, vous devrez garder à l'etat mis à jour à chaque modification de la valeur. Pour ce faire, vous liez un gestionnaire d'événement pour le composant. Dans les docs' exemples, généralement de l'événement onChange.

Exemple:

1) Lier gestionnaire d'événement dans le constructeur (valeur conservée en l'état)

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

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

2) Créer une fonction de gestionnaire d'

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

3) Créer un formulaire de soumission de la fonction (la valeur est prise à partir de l'état)

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

4) Rendre

<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 contrôlé composants, votre handleChange fonction sera toujours tiré, afin de mettre à jour et maintenir le bon état. L'état aura toujours de la valeur mise à jour, et lorsque le formulaire est soumis, la valeur sera prise à partir de l'état. Cela pourrait être un con si votre formulaire est très long, parce que vous aurez à créer une fonction pour chaque composant, ou d'écrire une simple qui gère tous les composants de changement de valeur.

Incontrôlée

De la Docs - Incontrôlé composant

Dans la plupart des cas, nous recommandons l'utilisation contrôlée des composants à mettre en œuvre
les formulaires. Contrôler les composants, les données de formulaire sont traitées par une Réagir
composante. L'alternative n'est pas contrôlée des composants, où les données de formulaire
est géré par le DOM lui-même.

À écrire un incontrôlée composant, au lieu de l'écriture d'un événement
gestionnaire pour chaque mise à jour d'état, vous pouvez utiliser une ref pour obtenir les valeurs d'un formulaire
du DOM.

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

Exemple:

1) Lier gestionnaire d'événement et de créer des ref à l'entrée dans le constructeur (pas de valeur conservés en l'état)

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

2) Créer un formulaire de soumission de la fonction (la valeur est prise à partir du DOM composant)

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

3) Rendre

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

Si vous utilisez incontrôlée composants, il n'est pas nécessaire de lier un handleChange fonction. Lorsque le formulaire est soumis, la valeur sera prise à partir du DOM et de la nécessaire validations peuvent arriver à ce point. Pas besoin d'en créer des fonctions de gestionnaire pour toute de l'entrée des composants ainsi.

Votre question

Maintenant, pour votre question:

... Je veux qu'elle soit appelée lorsque que j'appuie sur " Enter lorsque le nombre entier a été saisi

Si vous voulez atteindre cet objectif, l'utilisation incontrôlée de la composante. Ne pas créer le onChange gestionnaires s'il n'est pas nécessaire. Le enter clé de soumettre le formulaire et le handleSubmit fonction sera déclenché.

Les changements que vous devez faire:

Supprimer le onChange appel 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
});

Poignée de la soumettre le formulaire et validez votre saisie. Vous avez besoin pour obtenir la valeur de votre élément dans le formulaire de soumission de la fonction, puis valider. Assurez-vous de créer la référence de 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'une utilisation incontrôlée de la composante:

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')
);