我是 React js 的新手。我正在尝试通过单击箭头键来旋转图像。 有人帮助我,还分享了一些学习 React js 的文档。
提前致谢。
我的代码
.js
import React from 'react';
import Ballimg from '../Image/ImageMovement.gif'
import Style from '../Style/ImageComponentStyle.module.css'
class Ball extends React.Component{
constructor(props){
super(props);
this.handleKeyDown = this.handleKeyDown.bind(this)
this.state = {
imageDirection: Style.right
};
}
handleKeyDown(e){
if(e.KeyCode === 37){
this.setState({imageDirection : Style.left})
}
else if(e.KeyCode === 38){
this.setState({imageDirection : Style.up})
}
else if(e.KeyCode === 39){
this.setState({imageDirection : Style.right})
}
else if(e.KeyCode === 40){
this.setState({imageDirection : Style.down})
}
}
render(){
return(
<div>
<img src={Ballimg} alt="ball movement" className={this.state.imageDirection} onKeyDown={this.handleKeyDown}/>
</div>
);
}
}
export default Ball;
.module.css
.down {
transform: rotate(90deg);
}
.left {
transform: rotate(180deg);
}
.up {
transform: rotate(-90deg);
}
.right{
transform: rotate(0deg);
}
最佳答案
首先,你有一个错字:
// Not e.KeyCode
e.keyCode === 37
然后,您可能想为 keyDown
设置一个全局监听器,否则该事件将仅在元素获得焦点时起作用:
window.addEventListener('keydown', e => {
//e.keyCode
});
完整的钩子(Hook)示例:
const App = () => {
const [direction, setDirection] = useState(0);
useEffect(() => {
window.addEventListener('keydown', e => {
if (e.keyCode === 37) {
setDirection(180);
} else if (e.keyCode === 38) {
setDirection(-90);
} else if (e.keyCode === 39) {
setDirection(0);
} else if (e.keyCode === 40) {
setDirection(90);
}
});
}, []);
return (
<img
style={{ transform: `rotate(${direction}deg)` }}
alt="cat"
src={image}
/>
);
};
https://stackoverflow.com/questions/60901940/
相关文章:
scala - 在同一规范文件中测试 akka-http 和 akka actor 时,如何解决冲突
javascript - 为什么ioredis客户端开启keep-alive会超时?
react-native - 我可以通过 expo 获得在 android 上工作的 webpack
javascript - typescript 装饰器 : Add instance field t
reactjs - 尝试使用 React-Spring 制作动画时出现错误 "TypeError:
qt - 如何在使用 AUTORCC 的 CMake 项目中使用 qtquick_compiler_
nginx - 为什么我在nginx中无法正常显示CJK字符?