javascript - pulsada - Reaccionar-detectar la tecla ''enter'' presionar en el evento de cambio

detectar tecla pulsada javascript

Question

Tengo un componente React que es, más o menos, un área de texto simple donde un usuario puede escribir. Así es como se ve el código hasta ahora:

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)

Este componente está conectado a un almacén redux, que se actualiza cada vez que el usuario escribe algo en el área de texto. El almacén redux envía el nuevo valor al componente textarea, y el componente textarea vuelve a renderizar para mostrar el nuevo valor.

Mientras esto está funcionando hasta ahora, me gustaría que este componente se comporte de manera diferente si se presiona la tecla Intro. Como un evento de cambio no expone un código de clave (al menos no que yo sepa), no tengo idea de cómo hacer que la función handleChange llame al add prop si se presiona una tecla enter en lugar de llamar a la utilería de setText .

Una cosa que intenté fue adjuntar un controlador onKeyDown al área de texto en su lugar, que podría usar para detectar el código de la tecla enter (13), pero esto me hizo incapaz de establecer el texto correctamente, porque si convertí el código clave adjunto al evento a un personaje y lo agregué al valor actual, no habría forma de que yo determine si debe ser mayúscula o minúscula.

Estoy bastante atrapado aquí. Realmente no creo que haya una forma de que detecte la tecla Intro en un evento de cambio, y un evento KeyDown no tiene una forma para manejar todas las entradas posibles. ¿Hay alguna manera de que pueda combinar los dos?

¡Gracias por adelantado!

Answer 1

Puede usar ambos controladores la misma vez.

En onKeyDown puedes verificar la clave. Si está presionada ENTER, llame a event.preventDefault() para evitar la llamada onChange , o si no lo está - no haga nada

La cola de eventos de Javascript no contiene eventos de change hasta que se keydown al controlador predeterminado para el evento de selección. Si llama a event.preventDefault() en onKeyDown controlador onKeyDown no se disparará ningún evento de change .