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

Question

我是新来的反应js。我试图通过单击箭头键旋转图像。有人帮我，也分享一些学习反应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

由于未使用公共类方法，因此可以按如下方式调用该方法：

onKeyDown={handleKeyDown}

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

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

或者，使用公共类方法：

handleKeyDown = (e) => {}

关于更多细节，我建议你阅读我的另一个答案。

Answer 2

首先，您有一个输入错误：

// Not e.KeyCode
e.keyCode === 37

然后，您可能希望为按键设置一个全局侦听器，或者该事件仅在元素聚焦时起作用：

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