web-dev-qa-db-fra.com

ReactJS - Existe-t-il un moyen de déclencher une méthode en appuyant sur la touche «Entrée» à l'intérieur de <entrée />?

Utiliser uniquement onChange et valeur et tout en étant concentré dans un <input/>, de préférence sans jQuery, existe-t-il un moyen de déclencher une méthode en appuyant sur la touche "Entrée"? Parce que, voudrait seulement que l'utilisateur appuie sur la touche "Entrée" pour mettre à jour l'état de la chaîne name.

Voici le code:

  constructor(props) {
    super(props);

    this.state = {
      name: '',
    }
  }

  textChange(event) {
    this.setState({
      name: event.target.value,
    })
  }

  //Would like to trigger this once 'Enter' key is pressed while focused inside `<input/>`
  enterPressed() {
    var name = this.state.name;
  }

  render() {
    return (
        <input
          placeholder='Enter name'
          onChange={this.textChange.bind(this)}
          value={this.state.name}
        />
    )
  }
javascripthtmlcssreactjsreact-jsx
11
user3259472

Ce que vous pouvez faire, c'est utiliser les événements clés de React comme ceci:

<input
    placeholder='Enter name'
    onChange={this.textChange.bind(this)}
    value={this.state.name} 
    onKeyPress={this.enterPressed.bind(this)}
/>

Maintenant, pour détecter la touche Entrée, changez la fonction enterPressed en:

enterPressed(event) {
    var code = event.keyCode || event.which;
    if(code === 13) { //13 is the enter keycode
        //Do stuff in here
    } 
}

Ainsi, cela ajoute un écouteur d'événements à l'élément d'entrée. Voir Evénements clavier de React . La fonction enterPressed est alors déclenchée lors d'un événement, et maintenant enterPressed détecte le code clé, et si c'est 13, faites certaines choses.

Voici un violon démontrant l'événement.

Remarque: Les événements onKeyPress et onKeyDown se déclenchent instantanément à la pression de l'utilisateur. Vous pouvez utiliser onKeyUp pour lutter contre cela.

23
Andrew Li

Utilisez onKeyPress et la propriété key de l'objet événement résultant, qui est un cross-browser normalisé pour vous par React:

<meta charset="UTF-8">
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/browser.min.js"></script>
<div id="app"></div>
<script type="text/babel">

var App = React.createClass({
  getInitialState() {
    return {
      name: ''
    }
  },
  handleChange(e) {
    this.setState({name: e.target.value})
  },
  handleKeyPress(e) {
    if (e.key === 'Enter') {
      alert('Enter pressed')
    }
  },
  render() {
    return <input
      placeholder='Enter name'
      onChange={this.handleChange}
      onKeyPress={this.handleKeyPress}
      value={this.state.name}
    />
  }
})

ReactDOM.render(<App/>, document.querySelector('#app'))

</script>
2
Jonny Buchanan

Vous pouvez ajouter un onKeyPress à votre entrée et le rendre égal à la fonction que vous souhaitez exécuter. Vous auriez juste besoin de vous assurer que la touche enfoncée était la touche entrée en utilisant l'événement qui est passé à la fonction comme argument

Malheureusement, vous ne pouvez pas utiliser la méthode onchange seule pour obtenir ce résultat

1
finalfreq