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!
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 –
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ò. –
Hanno pubblicato come risposta. Grazie. –