Javascript 如何从驻留在React组件上的函数调用函数

我正在尝试从具有 this.getCurrentMarioPosition（）但它的意思是getCurrentMarioPosition不是调用它的处理程序的函数。我正在将处理程序添加到文档的事件侦听器中。当这实际上意味着文档而不是组件时，这会是一个问题吗？如果是，这个问题的解决方法是什么

我认为问题在于handleKey附加到document对象，所以当我说this时，它指的是document对象，而不是组件。因为在其他函数中，我以同样的方式调用它，并且它工作正常。如何从handleKey方法获取组件的上下文

我的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';


class Square extends React.Component {
  constructor(props){
    super(props)
    this.state={
      showMushroom:props.showMushroom,
      showMario:props.showMario,
    }
  }
  render(){
    if(this.state.showMushroom){
      return (
        <button className="square" >
        </button>
      );
    }else if(this.state.showMario){
      return (
        <button className="square-mario" >
        </button>
      );
    }else{
      return (
        <button className="square-plain" >
        </button>
      );
    }

  }

}

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rows:[],
      cols:[],
      occupiedCells:[],
      dimX:10,
      dimY:10,
      isMarioSet:false,

    };

    for(let i=0;i<this.state.dimX;i++){
      let colarray=new Array(10);
      for(let j=0;j<this.state.dimY;j++){
        let justRandomInt=Math.floor(Math.random(1,76)*10);

        if(justRandomInt % 2 ===0){
          colarray[j]=1;
        }else{
          colarray[j]=0;
        }
      }
      this.state.occupiedCells.push(colarray);
    }

    this.fillTheBoard();

    console.log(this.state.occupiedCells);
  }

  fillTheBoard(){

    for(let i=0;i<this.state.dimX;i++){
      for(let j=0;j<this.state.dimY;j++){
        this.state.cols.push(this.renderSquare(i,j))
      }
      this.state.rows.push(this.renderRow(this.state.cols));
      this.state.cols=[];
    }


  }



  componentWillMount(){
    console.log(document);
    document.addEventListener('keydown',this.handleKey,false);
  }

  handleKey(event){
    if(event.keyCode === 37){
        this.getCurrentMarioPosition();
    }
  }

  getCurrentMarioPosition(){
    for(let i=0;i<this.state.dimX;i++){
      for(let j=0;j<this.state.dimY;j++){
        if(this.state.occupiedCells[i][j]===-1){
          console.log([i,j]);
          return [i,j];
        }
      }
    }
  }

  generateRandomForColumn(){
    return Math.floor(Math.random(1,6)*10);
  }

  renderRow(cols){
    return(
      <div className="board-row">
        {cols}
      </div>
    );
  }



  renderSquare(i,j) {
    let showMushroom=false;
    let showMario=false;
    if(this.state.occupiedCells[i][j]===1)
      showMushroom=true;
    else{
      if(!this.state.isMarioSet){
        this.state.occupiedCells[i][j]=-1;
        this.state.isMarioSet=true;
        showMario=true;
      }
    }
    return (
      <Square key={new Date().getTime()} showMario={showMario} showMushroom={showMushroom}/>
    );
  }

  generatePairingFunction(a,b){
    return (((a+b)*(a+b+1))/2)+b;
  }

  render() {
    return (
      <div>
        {this.state.rows}
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props){
    super(props)

  }

  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
类Square扩展了React.Component{
建造师（道具）{
超级（道具）
这个州={
秀蘑菇：道具，秀蘑菇，
showMario:props.showMario，
}
}
render（）{
if（this.state.showMuslium）{
返回(
);
}else if（this.state.showMario）{
返回(
);
}否则{
返回(
);
}
}
}
类板扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
行：[]，
cols:[]，
占用的小区：[]，
dimX:10，
朦胧：10，
Ismaroset:错，
};
对于（设i=0；i您必须调用accurate
此
上下文，因为回调是在另一个上下文中调用的

document.addEventListener('keydown',this.handleKey.bind(this),false);

将来，您可能会遇到更多有关
此
上下文的问题。我建议您花一些时间阅读更多有关它的内容。从长远来看，这将节省您的时间。：-
您必须调用accurate
此
上下文，因为回调是在另一个上下文中调用的

document.addEventListener('keydown',this.handleKey.bind(this),false);

将来您可能会遇到更多关于
这个
上下文的问题。我建议您花一些时间来阅读更多关于它的内容。从长远来看，这将节省您的时间。：-
您可以在构造函数中这样定义

constructor(props){
  super(props)
    this.state={
      showMushroom:props.showMushroom,
      showMario:props.showMario,
    }   
  this.handleKey = this.handleKey.bind(this)
}

您可以像这样在构造函数中定义

constructor(props){
  super(props)
    this.state={
      showMushroom:props.showMushroom,
      showMario:props.showMario,
    }   
  this.handleKey = this.handleKey.bind(this)
}

你能将答案标记为正确以帮助他人吗？你能将答案标记为正确以帮助他人吗？为了将来的参考，你应该使用大段代码格式，而不是使用单行格式。为了将来的参考，你应该使用大段代码格式，而不是使用单行格式。