reactjs - 如何在 React 中通过用户的键盘输入设置状态？

问题描述

我目前正在编写一个 2048 游戏，它检测用户的键盘输入，然后改变相应方向的状态；但我未能改变状态。我将其用作捕获输入命令的参考。在非输入元素上反应 onKeyDown/onKeyUp 事件然后设置一个名为 keyValue 的字符串来存储键盘输入的字符串值并在我的 addEventListener 中更新 keyValue。但我未能通过我的 componentDidMount 中的 keyValue 设置状态。我的代码如下。我之前也尝试在我的 addEventListner 中设置状态，但它也失败了。有人可以帮忙吗？谢谢。

constructor(props) {
        super(props);
        this.state = {
            board: Array(4).fill().map(x => Array(4).fill(0)),
            score: 0,
            end: false,
            emptySpace: true,
            left: false,
            right: false,
            up: false,
            down: false
        };
    }

   componentDidMount() {
        var cmdDown = false;
        var keyValue = "";
        document.body.addEventListener('keydown', function (event) {
            var key = event.keyCode || event.charCode || 0;
            if ([37, 38, 39, 40].indexOf(key) !== -1) {
                cmdDown = true;
                if ([37].indexOf(key) !== -1) {
                    keyValue = "ArrowLeft";
                } else if ([38].indexOf(key) !== -1) {
                    keyValue = "ArrowUp";
                } else if ([39].indexOf(key) !== -1) {
                    keyValue = "ArrowRight";
                } else if ([40].indexOf(key) !== 1) {
                    keyValue = "ArrowDown"
                }
            }
            console.log(keyValue);
            console.log('CMD DOWN: ' + cmdDown.toString());
        });

        document.body.addEventListener('keyup', function (event) {
            var key = event.keyCode || event.charCode || 0;
            if ([37, 38, 39, 40].indexOf(key) !== -1) {
                cmdDown = false;
            }
            console.log('CMD DOWN: ' + cmdDown.toString());
        });
        if (keyValue === "ArrowUp") {
            this.setState({ up: true });
            this.setState({ down: false });
            this.setState({ left: false });
            this.setState({ right: false });
        } else if (keyValue === "ArrowDown") {
            this.setState({ up: false });
            this.setState({ down: true });
            this.setState({ left: false });
            this.setState({ right: false });
        } else if (keyValue === "ArrowLeft") {
            this.setState({ up: false });
            this.setState({ down: false });
            this.setState({ left: true });
            this.setState({ right: false });
        } else if (keyValue === "ArrowRight") {
            this.setState({ up: false });
            this.setState({ down: false });
            this.setState({ left: false });
            this.setState({ right: true });
            console.log(this.state.right)
        }
    }

我写了一个函数来打印我的状态。但是在日志中它总是打印错误。为什么我的状态在渲染时没有得到更新？有什么与同步有关的吗？

printDir = () => {
        console.log("up: " + this.state.up.toString());
        console.log("down: " + this.state.down.toString());
        console.log("left: " + this.state.left.toString());
        console.log("right: " + this.state.right.toString());
    }

 <button onClick = {this.printDir}>dir</button>

标签： reactjsdomkeyboard-eventssetstate

reactjs - 如何在 React 中通过用户的键盘输入设置状态？

问题描述

解决方案

推荐阅读