React 击键时有效的元素移动
Effective element movement on keystroke in React
我正在编写 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;
创建一次事件侦听器,并在卸载组件后删除事件。同时使用回调函数更新状态,这样你可以获得当前状态值:
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 中通过左右箭头键移动元素的程序。不幸的是,我的代码无效。当值远离初始值 - 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;
创建一次事件侦听器,并在卸载组件后删除事件。同时使用回调函数更新状态,这样你可以获得当前状态值:
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:
}
}