React 击键时有效的元素移动

Question

我正在编写 React 中通过左右箭头键移动元素的程序。不幸的是，我的代码无效。当值远离初始值 - 50（我们可以在 console.log 中看到）时，Render 方法会被调用很多次。所以可能没有最好的方法。知道它是如何工作的吗？

import React, { useState, useEffect } from 'react';

function App () {
  const [elementPosition, setElementPosition] = useState(50)
  console.log(elementPosition)
  useEffect(() => {
    window.addEventListener('keydown', keyPress)
  })

  const keyPress = (e) => {
    switch (e.which) {
      case 37: {
        // left
        setElementPosition(elementPosition - 1)
        break
      }
      case 39: {
        // right
        setElementPosition(elementPosition + 1)
        break
      }
      default:
    }
  }

  return (
    <div className="App">
      <div className='element' style={{left: elementPosition + '%', width:'10px', height: '10px', position: 'absolute', backgroundColor: 'red'}} />
    </div>
  );
}

export default App;

Answer 1

创建一次事件侦听器，并在卸载组件后删除事件。同时使用回调函数更新状态，这样你可以获得当前状态值：

 useEffect(() => {
    document.addEventListener('keydown', keyPress);
      return ()=> {
        document.removeEventListener('keydown', keyPress);
      }
 }, []);
    
 const keyPress = (e) => {
    switch (e.which) {
      case 37: {
        // left
        setElementPosition((elementPosition)=> elementPosition - 1)
        break
      }
      case 39: {
        // right
        setElementPosition((elementPosition)=> elementPosition + 1)
        break
      }
      default:
    }
  }

React 击键时有效的元素移动

Effective element movement on keystroke in React

reactjs

position

keystroke