Réagir à détection de touche "entrer" de la presse dans l'événement de changement de

J'ai une Réagir composant qui est, plus ou moins, un simple textarea où un utilisateur peut taper dans. Voici à quoi ressemble le code pour l'instant:

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 redux du magasin, qui est mis à jour chaque fois que l'utilisateur tape quelque chose dans la zone de texte. Le redux banque envoie la nouvelle valeur pour le composant textarea, et le composant textarea re-rend pour afficher la nouvelle valeur.

Alors que c'est travaillé jusqu'à présent, j'aimerais que ce composant se comporte différemment si la touche entrée est enfoncée. Depuis un événement de changement de ne pas exposer un mot de code (du moins pas que je sache), je n'ai aucune idée de comment faire la handleChange appel de fonction le add prop si la touche entrée est pressée au lieu d'appeler la setText prop.

Une chose que j'ai essayé était de joindre un onKeyDown gestionnaire de la zone de texte au lieu de cela, que je pourrais utiliser pour détecter l'entrée du mot de code (13), mais cela m'a fait impossible de définir correctement le texte, parce que si je convertis le mot de code attaché à l'événement un caractère et ajouté à la valeur actuelle, il n'y aurait aucun moyen pour moi de déterminer si elle doit être en majuscule ou en minuscule.

Je suis coincé ici. Je ne pense vraiment pas qu'il y a pour moi un moyen de détecter la touche entrée sur un événement de changement, et un événement keyDown n'ont pas un moyen pour moi de gérer toutes les entrées possibles. Est-il un moyen que je puisse combiner les deux?

Merci d'avance!

OriginalL'auteur Michael Parker | 2016-04-09