web-dev-qa-db-fra.com

Comment déclencher un événement de pression de touche dans React.js

Je suis novice avec React.js. J'essaie de déclencher un événement de pression de touche pour la div de texte.

voici le code de la zone de texte pour lequel je veux exécuter le déclencheur de pression de touche.

<div id="test23" contenteditable="true" class="input" placeholder="type a message" data-reactid="137">Hii...</div>

et la méthode de la touche est

onKeyPress: function(e) {
   return "Enter" == e.key ? "Enter key event triggered" : void 0)
}

Je l'ai essayé avec jquery mais je ne peux pas le déclencher.

voici mon React code que j'ai essayé mais qui ne fonctionne pas.

var event = new Event('keypress', {
 'keyCode' : 13,
 'which' : 13,
 'key' : 'Enter'
});
var node = document.getElementById('test23');
node.dispatchEvent(event);

Merci :)

javascriptjqueryjavascript-eventsreactjs
17
Piyush

Fondamentalement, onKeydown doit être géré comme ceci. J'espère que cela t'aides.

class App extends React.Component {

    constructor(props) {
        super(props)
        this.state = { value: 'hi' }
    }

    onKeyPress = event => {
        if (event.key === 'Enter') {
            this.setState({ value: event.target.value })
        }
    }

    render() {

        return (
            <div>
                <input type="text" onKeyPress={this.onKeyPress} placeholder='press Enter'/>  
                <h1>Value: {this.state.value}</h1>
            </div>
        );
    }
}
export default App;

Démo de travail

2
Pietro