javascript - 使用来自按键输入的对象更新状态[ react ]

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

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

例如。按下向上键时return {'Y': 1};，但<p>元素中什么都没有显示

我相信我对componentWillReceiveProps函数缺少一些了解，但是我很茫然。

可能是keyboardInput返回的对象不是字符串值吗？但是即使将return更改为字符串，我仍然无法将其呈现。

我在这里想念什么？

谢谢，

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;

最佳答案

看起来这里对React / JS构造有一些误解。

希望下面的内容对您有所帮助，但是您绝对应该仔细查看React文档，以更好地了解您的工作。

您的{this.keyboardInput}函数中的render实际上不在这里指任何东西-this指的是您的GameBoard类，然后您尝试访问某个成员-无论是函数，变量还是其他东西-称为keyboardInput。你没有一个。

使用React，您要访问的是{this.state.keyboardInput}-就是说：在this（游戏板）中，我要访问其当前的state。在该state中，有一个名为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 }。”

注意，this中的keyboardInput要引用React的组件，因此我们必须将其绑定到侦听器中：

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

我们在这里所做的只是告诉handleKeyboardInput使用与this相同的componentWillMount。 this中的componentWillMount是指我们的GameBoard组件，因此this中的handleKeyboardInput也将是GameBoard。我们之所以这样，是因为handleKeyboardInput要调用GameBoard的.setState函数。

通常，这就是React流程的方式：您需要使用state在组件上设置一些setState。完成后，您可以说render在this.state.foobar函数（或与此相关的任何其他函数）中读出它。

在此示例中，我们从侦听器开始。我们看到一个按键事件，并且说，去处理我们在handleKeyboardInput上需要做的一切！ handleKeyboardInput说GameBoard！您的状态为keyboardInput: foo。一直以来，渲染器一直在显示GameBoard的状态（keyboardInput！）。

就像我说的那样，这是React中状态的一个非常非正式的总结-一定要看一下React的文档，也许通过一个示例项目来工作，他们必须让它沉入其中。

关于javascript - 使用来自按键输入的对象更新状态[ react ]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47957300/