web-dev-qa-db-fra.com

React - détecter la pression de la touche 'entrée' dans l'événement de changement

J'ai un composant React qui est, plus ou moins, une simple zone de texte dans laquelle un utilisateur peut taper. Voici à quoi ressemble le code jusqu'à présent:

import React from 'react';
import {connect} from 'react-redux';

function handleChange(event) {
    const {setText} = this.props;

    //is there some way I can detect [ENTER] here and call this.props.add instead?
    setText(event.target.value);
}

class TextArea extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {value} = this.props;

        return (
            <div className="list-item">
                <textarea
                    className="form-control"
                    value={value}
                    onChange={handleChange.bind(this)}
                />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        value: state.value
    }
}

function mapDispatchToProps(dispatch) {
    return {
        setText(text) {
            const action = {
                type: 'set-text',
                text: text
            };

            dispatch(action);
        },
        add() {
            const action = {
                type: 'add'
            };

            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TextArea)

Ce composant est connecté à un magasin redux, qui est mis à jour chaque fois que l'utilisateur tape quelque chose dans la zone de texte. Le magasin redux envoie la nouvelle valeur au composant textarea et le composant textarea est rendu à nouveau pour afficher la nouvelle valeur.

Pendant que cela fonctionne jusqu'à présent, j'aimerais que ce composant se comporte différemment si la touche Entrée est enfoncée. Puisqu'un événement de changement n'expose pas un KeyCode (du moins pas que je sache), je n'ai aucune idée comment faire la fonction handleChange appeler la prop add si une touche entrée est pressé au lieu d'appeler la propriété setText.

Une chose que j'ai essayé était d'attacher à la place un gestionnaire onKeyDown à la zone de texte, que j'ai pu utiliser pour détecter l'entrée keyCode (13), mais cela m'a empêché de définir correctement le texte, car si je convertissais le keyCode attaché à l'événement à un caractère et l'ajouté à la valeur actuelle, il n'y aurait aucun moyen pour moi de déterminer s'il doit être en majuscule ou en minuscule.

Je suis plutôt coincé ici. Je ne pense vraiment pas qu'il existe un moyen pour moi de détecter la touche entrée sur un événement de changement, et un événement keyDown n'a pas un moyen pour moi de gérer toutes les entrées possibles. Existe-t-il un moyen de combiner les deux?

Merci d'avance!

javascriptreactjsreduxreact-redux
15
Michael Parker

Vous pouvez utiliser les deux gestionnaires en même temps.

Dans onKeyDown, vous pouvez vérifier la clé. S'il est appuyé sur ENTRÉE, appelez event.preventDefault() pour empêcher l'appel de onChange, ou si ce n'est pas le cas - ne faites rien

La file d'attente d'événements Javascript ne contient pas d'événement change jusqu'à ce que le gestionnaire par défaut de l'événement keydown soit appelé. Si vous appelez event.preventDefault() dans le gestionnaire onKeyDown, aucun événement change ne sera déclenché.

21
Nick Rassadin