如何使用反應在頁面上顯示擊鍵-有解無憂

我的檔案如下。

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;

我可以在控制臺中正確記錄擊鍵，但是一旦我添加，this.state.count = event.keyCode;我就會收到錯誤TypeError: Cannot set properties of undefined (setting 'count')

不確定正確的解決方案是什么，任何幫助將不勝感激！

uj5u.com熱心網友回復：

代替

 this.state.count = event.keyCode;

你需要使用

this.setState({count: event.keyCode})

uj5u.com熱心網友回復：

添加：

this.setState({
  count: event.keyCode
})

或者，使用鉤子：

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>
  );
}

演示： Stackblitz

uj5u.com熱心網友回復：

有關捕獲事件鍵的示例，請查看https://keycode.info。

您應該考慮升級到函陣列件（React 17 ）。下面的例子涵蓋了 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338068.html

標籤：javascript html 反应

上一篇：Cypress：訪問自定義定義的css屬性

下一篇：我正面臨“TypeError：無法讀取未定義的屬性（讀取'push'）”的錯誤