代码之家 › 专栏 › 技术社区 › Chef1075

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

state reactjs javascript

Chef1075 · 技术社区 · 7 年前

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

我可以接到电话 keyboardInput() 和控制台。当按下其中一个箭头键时,正确记录,但是我无法获取要渲染的返回值 <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;

1 回复 | 直到 7 年前

elsyr 7 年前

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

希望下面的内容能帮助您,但您一定要仔细查看React文档,以便更好地掌握您正在做的事情。

{this.keyboardInput} 在您的 render 函数在这里实际上没有引用任何内容- this 指的是您的 GameBoard 类,然后您试图访问某个被调用的成员(无论是函数、变量还是其他) keyboardInput . 你没有。

使用React,您希望访问的是 {this.state.keyboardInput} -这句话的意思是:在 这 (游戏板),我想访问其当前 state . 因为 状态 ,有一个名为 键盘输入 . 渲染它。

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

第二步是设置那个州。看起来你调用了你的函数 键盘输入 当eventlistener接收到一个事件时,它会关闭,但我认为这是您的问题的一部分: 键盘输入 最好叫个这样的名字 onKeyboardInput 或 handleKeyboardInput .

还记得我们想如何设定状态吗?在该函数中,我们必须使用React setState 功能-看起来像这样:

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

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

此函数现在表示“嘿 游戏板 ,您所在的州现在将有一个字段 键盘输入 ,看起来像对象 { 'Y', -1 } ."

请注意 这 在里面 键盘输入 想要引用React的组件,所以我们必须在侦听器中绑定它:

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

我们在这里所做的就是告诉你 手柄键盘输入 使用相同的 这 像 componentWillMount . 这 在里面 组件将安装 指我们的 游戏板 组件,所以 这 在里面 手柄键盘输入 也将参考 游戏板 . 我们想要这个是因为 手柄键盘输入 想打电话 游戏板 的 .setState 作用

一般来说,反应流程就是这样的:您需要设置一些 状态 在组件上使用 setState . 完成后,您可以在 提供 功能(或任何其他功能),通过以下方式 this.state.foobar .

在本例中,我们从侦听器开始。我们看到一个按键事件,然后说,去处理我们在 手柄键盘输入 ! 手柄键盘输入 说 游戏板 ! 您所在的州是 keyboardInput: foo . 一直以来,渲染都在查看 游戏板 的状态( 键盘输入 !) 显示。

正如我所说,这是React中一个非常非正式的状态摘要-一定要看一下React的文档,也许要通过一个他们必须真正理解的示例项目。