React中按键的有效元素移动

问题描述

我正在用React中的左右箭头键来编程元素的移动。不幸的是，我的代码无效。当值远离初始值-50（我们可以在console.log中看到）时，渲染方法被称为很多时间。所以可能不是最好的方法。知道如何使它起作用吗？

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;

解决方法

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

 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:
    }
  }