Reagieren - erkennen Sie die "enter" - Taste drücken, im change-Ereignis

Ich habe einen Reagieren Komponente, die, mehr oder weniger, eine einfache textarea, wo ein Benutzer in geben. Hier ist, was der code sieht so weit:

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)

Diese Komponente ist verbunden mit einer redux-Shop, die jedes mal aktualisiert, wenn der Benutzer tippt etwas in den text-Bereich. Die redux-Shop sendet den neuen Wert zurück in die textarea-Komponente, und die textarea-Komponente neu gerendert, um die Anzeige den neuen Wert ein.

Während dieser arbeiten so weit, dass ich möchte, dass dieser Bestandteil sich anders Verhalten, wenn Sie die enter-Taste gedrückt wird. Da ein change-Ereignis nicht verfügbar, einen Schlüsselcode (zumindest nicht, dass ich bewusst bin), habe ich keine Ahnung wie die das machen handleChange Funktion rufen Sie die add prop, wenn die enter-Taste gedrückt wird, anstelle von aufrufen der setText prop.

Eine Sache, die ich versuchte, wurde zum anbringen einer onKeyDown - handler an die textarea-Komponente statt, die ich verwenden könnte, zu erkennen geben Sie den Schlüsselcode (13), aber diese hat mich nicht in der Lage, um den text korrekt, denn wenn ich umgewandelt den Schlüsselcode an das Ereignis angehängt, um ein Zeichen angehängt und es auf den aktuellen Wert, würde es keine Möglichkeit für mich, um zu bestimmen, ob es sollte groß-oder Kleinschreibung.

Ich bin ziemlich festgefahren hier. Ich glaube wirklich nicht, es ist für mich ein Weg, um erkennen Sie die enter-Taste auf ein change-Ereignis, und ein keyDown-Ereignis nicht ein Weg für mich, um alle möglichen Eingaben. Gibt es eine Möglichkeit, ich könnte die beiden verbinden?

Vielen Dank im Voraus!

  • Warum nicht beide Handler gleichen Zeit? In onKeyDown Sie können die check-Taste. Wenn es ENTER gedrückt nennen event.preventDefault() um zu verhindern, dass onChange nennen, oder, wenn es nicht - nichts zu tun
  • Oh, wow, ich wusste gar nicht, dass der change-handler würde nur aufgerufen werden, nachdem das keydown-handler event sprudelte. Ich dachte, Sie würden beide zu der gleichen Zeit, aus irgendeinem Grund. Danke für die Antwort! Wenn Sie veröffentlichen diesen Kommentar als Antwort, ich werde es akzeptieren.
  • Gepostet hast, als Antwort. Danke.
Schreibe einen Kommentar