reactjs - 相对于箭头键旋转图像反应js
问题描述
我是反应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
});
完整的钩子示例:
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}
/>
);
};
推荐阅读
- astropy - Astropy Units equivalencies - 使用类和 SI 前缀的干涉测量基线
- android - Kotlin - 在 Android 10+ 上的 Environment.getExternalStorageDirectory().getAbsolutePath() 中创建目录
- python - 创建的 Django 测试对象为空
- android-studio - 使用 fromJson 函数时重载分辨率歧义
- python - Python 程序丢失了时间
- php - 使用 PHP 下载文件时,存档格式未知或损坏
- swift5 - 与 ios 13 OS 以上的 Esptouch iOS 框架的兼容性问题
- flutter - 自定义 AppBar 不显示抖动
- php - 将 Json 发送到 Jira Api
- python - 为什么 PyPDF2 在打印 extractText 时显示此输出?