Mi archivo es el siguiente.
import React, {Component} from 'react'; import './App.css'; class App extends Component { constructor(props){ super(props); this.state = { count: 0 }; } onKeyPress(event){ console.log(event.keyCode); this.state.count = event.keyCode; } componentDidMount(){ document.addEventListener("keydown", this.onKeyPress, false); } componentWillUnmount(){ document.removeEventListener("keydown", this.onKeyPress, false); } render() { return ( <div className="App"> <header className="App-header"> <p> {this.state.count} </p> </header> </div> ); } } export default App; Puedo registrar correctamente las pulsaciones de teclas en la consola, pero una vez que agregué this.state.count = event.keyCode; Recibo el error TypeError: Cannot set properties of undefined (setting 'count')
No estoy seguro de cuál es la solución adecuada, cualquier ayuda sería apreciada.
En vez de
this.state.count = event.keyCode;necesitas usar
this.setState({count: event.keyCode})Agregar :
this.setState({ count: event.keyCode })O, con ganchos:
import React, {useState, useEffect} from "react"; import "./style.css"; export default function App() { const [count, setCount] = useState(0) const onKeyPress = (event) => { console.log(event.keyCode) setCount(event.keyCode) } useEffect(() => { document.addEventListener('keydown', onKeyPress); return () => { document.removeEventListener('keydown', onKeyPress); }; }, []) return ( <div className="App"> <header className="App-header"> <p>{count}</p> </header> </div> ); }Demostración: Stackblitz
Eche un vistazo a https://keycode.info para ver un ejemplo de captura de claves de eventos.
Debería considerar la actualización a los componentes de función (React 17+). El siguiente ejemplo cubre el uso de ganchos en React 17.
const { useCallback, useEffect, useMemo, useState } = React; const App = () => { const [key, setKey] = useState(0); const [keyCode, setKeyCode] = useState(0); useEffect(() => { document.addEventListener('keydown', onKeyPress, false); return () => { document.removeEventListener('keydown', onKeyPress, false); }; }, []); const onKeyPress = useCallback(({ key: newKey, keyCode: newKeyCode, preventDefault }) => { setKey(newKey); setKeyCode(newKeyCode); preventDefault(); }, []); return useMemo(() => ( <div className="App"> <header> <p><label className="field">Key</label>{key}</p> <p><label className="field">KeyCode</label>{keyCode}</p> </header> </div> ), [key, keyCode]); }; ReactDOM.render(<App />, document.getElementById('react')); .field { font-weight: bold; } .field::after { content: ': '; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>