Question

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

当按下其中一个箭头键时，我可以正确调用keyboardInput()和console.log，但是我无法在<p>The current input is: {this.keyboardInput}</p>

中获取要返回的返回值

E.g。按下向上键时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文档，以便更好地处理您正在做的事情。

{this.keyboardInput}函数中的

render并未在此处引用任何内容 - this指的是您的GameBoard类，然后您就是试图访问某个成员 - 无论是函数，变量还是其他任何成员 - 称为keyboardInput。你没有。

使用React，您想要访问的是{this.state.keyboardInput} - 这就是说：在this（GameBoard）中，我想访问其当前的state。在state中，有一个名为keyboardInput的字段。渲染。

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

第二步是实际设置该状态。当eventlistener选择一个事件时，您似乎已经调用了函数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 }});
        }
}

此功能现在说，＆＃34;嘿GameBoard，您的州现在将有一个字段keyboardInput，它看起来像对象{ 'Y', -1 }。＆＃34 ;

请注意this中的keyboardInput想要引用React的组件，因此我们必须在听众中绑定它：

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

我们在此处所做的就是告诉handleKeyboardInput使用与this相同的componentWillMount。 this中的componentWillMount引用了我们的GameBoard组件，因此this中的handleKeyboardInput也会引用GameBoard。我们希望这样，因为handleKeyboardInput想要调用GameBoard的{{1}}功能。

一般情况下，React的流程如何：您希望使用.setState在组件上设置一些state。完成后，您可以在setState函数（或任何其他函数）中阅读render。

在这个例子中，我们从听众开始。我们看到一个按键事件，并说，在this.state.foobar处理我们需要做的事情！ handleKeyboardInput说handleKeyboardInput！你的州是GameBoard。一直以来，渲染都在显示keyboardInput: foo的状态（GameBoard！）以显示。

就像我说的，这是React中非常非正式的状态纲要 - 绝对可以看看React的文档，也许可以通过一个他们必须真正让它沉入其中的示例项目。

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

1 个答案: