相对于箭头键旋转图像反应js

Question

我是反应 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);
}

Answer 1

首先，你有一个错字：

// 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}
    />
  );
};

Answer 2

由于你没有使用公共类方法，你可以像这样调用方法：

onKeyDown={handleKeyDown}

绑定this的方法需要绑定this。所以，如果你使用onKeyDown={this.handleKeyDown}，你必须像这样绑定：

this.handleKeyDown = this.handleKeyDown.bind(this) // inside constructor

或者，使用公共类方法：

handleKeyDown = (e) => {}

更多详情，我建议你阅读我的另一个answer。