javascript - 使用按键输入中的对象更新状态 [React]

Question

我正在尝试根据按键输入更新组件的状态，并将其传递给另一个组件。

我可以打电话keyboardInput()当按下其中一个箭头键时，console.log 会正确显示，但是我无法获取要在 <p>The current input is: {this.keyboardInput}</p> 中呈现的返回值

例如return {'Y': 1};当按下向上键时，<p>中什么也没有出现元素

我相信我对 componentWillReceiveProps 缺少一些理解功能，但我不知所措。

难道是keyboardInput返回一个对象而不是字符串值？但即使我将返回值更改为字符串，我仍然无法渲染它。

我在这里缺少什么？

谢谢

class GameBoard extends Component {

    constructor(props) {
        super(props);
        this.state = {
            test: {},
        };
    }

    // Captures event from main window
        keyboardInput = (e) => {

            const code = e.keyCode ? e.keyCode : e.which;

            // Change X and Y values
            if (code === 38) { //up key
                return {'Y': 1};
            } else if (code === 40) { //down key
                return {'Y': -1};
            } else if (code === 37) { // left key
                return {'X': 1};
            } else if (code === 39) { // right key
                return {'X': -1};
            }
        };

    componentWillMount() {
        window.addEventListener('keydown', this.keyboardInput);
    }

    componentWillUnmount() {
        window.removeEventListener('keydown', this.keyboardInput);
    }

    componentWillReceiveProps(nextProps) {
        this.setState.test = this.keyboardInput(nextProps);
    }

    render() {

        return (
            <div>
                <p>The current input is: {this.keyboardInput}</p>
                <Ball/>
            </div>
        )
    }

}

class App extends Component {

  render() {

      const boardStyle = {
          'position': 'absolute',
          'backgroundColor': '#7f8c8d',
          'height': '100%',
          'width': '100%',

      };

    return (
      <div>
        <header>
          <h1 className="App-title">Welcome to Moving Objects</h1>
        </header>
          <div style={boardStyle}>
              <GameBoard/>
          </div>
      </div>
    );
  }
}

export default App;

Answer 1

看起来这里对 React/JS 结构存在一些误解。

希望下面的内容能够对您有所帮助，但是您绝对应该仔细查看 React 文档，以便更好地掌握您正在做的事情。

render 函数中的

{this.keyboardInput} 实际上并不引用此处的任何内容 - this 引用的是您的 GameBoard 类，然后您尝试访问某个名为 keyboardInput 的成员 - 无论是函数、变量还是其他任何东西。你没有。

使用 React，您想要访问的是 {this.state.keyboardInput} - 这就是说:在 this (游戏板)中，我想要访问其当前的状态。在该状态中，有一个名为keyboardInput的字段。渲染它。

<p> The current input is: {this.state.keyboardInput} </p>

第二步是实际设置该状态。当事件监听器拾取事件时，您似乎已经调用了函数 keyboardInput ，但我认为这是您问题的一部分: keyboardInput 最好命名为类似的名称onKeyboardInput 或 handleKeyboardInput。

还记得我们想要如何设置状态吗？在该函数内，我们将不得不使用 React 的 setState函数 - 它看起来像这样:

handleKeyboardInput = (e) => {
        const code = e.keyCode ? e.keyCode : e.which;

        if (code === 38) { //up key
            this.setState({ keyboardInput: {'Y', -1 }});
        }
}

这个函数现在说，“嘿 GameBoard，你的状态现在将有一个字段 keyboardInput，它看起来像对象 { 'Y ', -1 }。"

请注意，keyboardInput 中的 this 想要引用 React 的组件，因此我们必须在监听器中绑定(bind) this:

componentWillMount() {
        window.addEventListener('keydown', this.handleKeyboardInput.bind(this));
}

我们在这里所做的就是告诉handleKeyboardInput使用与componentWillMount相同的this。 componentWillMount 中的 this 引用我们的 GameBoard 组件，因此 handleKeyboardInput 中的 this 也将请参阅GameBoard。我们想要这个是因为 handleKeyboardInput 想要调用 GameBoard 的 .setState 函数。

一般来说，React 的流程是这样的:您需要使用 setState 在组件上设置一些状态。完成后，您可以通过说 this.state.foobar 在 render 函数(或任何其他函数)中读出它。

在此示例中，我们从监听器开始。我们看到一个按键事件，然后说，去处理 handleKeyboardInput 需要做的任何事情! handleKeyboardInput 表示 GameBoard!您的状态是keyboardInput: foo。渲染始终在寻找要显示的 GameBoard 状态(keyboardInput!)。

就像我说的，这是 React 中状态的非常非正式的概述 - 一定要看看 React 的文档，也许还需要完成一个示例项目，他们必须真正让它深入理解。