2016-04-09 18 views
9

Ho un componente React che è, più o meno, una semplice area di testo in cui un utente può digitare. Ecco ciò che il codice è simile finora:React - rileva "invio" premere il tasto in cambio evento

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) 

Questo componente è collegato a un negozio di redux, che viene aggiornato ogni volta che l'utente digita qualcosa nell'area di testo. L'archivio redux rimanda il nuovo valore al componente textarea e il componente textarea esegue nuovamente il rendering per visualizzare il nuovo valore.

Mentre funziona fino ad ora, mi piacerebbe che questo componente si comportasse in modo diverso se si preme il tasto Invio. Poiché un evento di cambiamento non espone un codice chiave (almeno non che ne sia a conoscenza), non ho idea di come rendere la funzione handleChange chiamata il puntello add se viene premuto un tasto Invio invece di chiamare il puntello setText.

Una cosa che ho provato è stato quello di collegare un onKeyDown gestore per textarea invece, che ho potuto usare per rilevare il entrare keyCode (13), ma questo mi ha fatto in grado di impostare correttamente il testo, perché se mi sono convertito alla keyCode allegato per l'evento a un personaggio e aggiunto al valore corrente, non ci sarebbe alcun modo per me determinare se debba essere maiuscolo o minuscolo.

Sono abbastanza bloccato qui. Non penso davvero che ci sia un modo per me di rilevare il tasto Invio su un evento di cambiamento, e un evento keyDown non ha modo di gestire tutti i possibili input. C'è un modo per combinare i due?

Grazie in anticipo!

+0

Perché non utilizzare entrambi i gestori nello stesso momento? In 'onKeyDown' è possibile selezionare il tasto. Se è premuto INVIO chiama 'event.preventDefault()' per impedire la chiamata 'onChange', o se non lo è - non fare nulla –

+0

Oh, wow, non mi sono reso conto che il gestore delle modifiche sarebbe stato chiamato solo dopo il gestore di keydown evento ribollito. Pensavo che sarebbero stati entrambi chiamati allo stesso tempo, per qualche motivo. Grazie per la risposta! Se pubblichi quel commento come risposta, lo accetterò. –

+0

Hanno pubblicato come risposta. Grazie. –

risposta

16

È possibile utilizzare entrambi i gestori nello stesso momento.

In onKeyDown è possibile selezionare il tasto. Se si tratta di ENTER chiamata pressato event.preventDefault() per prevenire onChange chiamata, o se non è - non fare nulla

coda di eventi Javascript non contiene change evento fino gestore predefinito per keydown evento si chiama. Se chiami lo event.preventDefault() nel gestore onKeyDown non verrà eseguito l'evento change.

+0

"Escludendo' event.preventDefault() 'nel tasto' [Premere | Su | Giù] 'consente di attivare l'evento' change'. " - Punto chiave da notare! Grazie! – Deepak

Problemi correlati