javascript - 由于 'lifting state up'，无法访问事件对象

Question

我正在浏览 React 文档，但我陷入了困境:

class Square extends React.Component {
  render() {
    return (
      <button
        className="square"
        onClick={() => this.props.onClick()}
      >
        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
    };
  }

  handleClick(i) {
    console.log(event); // (*)
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    this.setState({squares: squares});
  }

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}{this.renderSquare(4)}{this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  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')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

https://codepen.io/gaearon/pen/ybbQJX
(*) 我不明白为什么可以在那里访问事件。它是如何通过所有这些方法进行转移的？此外，当我将 Square 更改为:

class Square extends React.Component {
    constructor(props){
        super(props); 
        this.onClick = this.onClick.bind(this); 
    }

    onClick(){
        this.props.onClick();
    }

    render() {
        return (
            <button className="square" onClick={this.onClick}>
                {this.props.value}
            </button>
        );
    }
}

我无法再访问事件 (*)。我收到错误“意外使用‘事件’”。我不知道为什么。好吧，我猜这是因为箭头函数没有自己的 this，但事件似乎并不依赖于它。它们也没有参数，但无需在参数中指定即可访问事件。我也怀疑 super 是否与此有关。如果对此有任何澄清，我将不胜感激。谢谢。

Answer 1

https://reactjs.org/docs/events.html我认为问题可能是在第一种情况下，您直接在事件处理程序中console.log(event)。在第二种情况下，您的事件处理程序实际上位于 Square 类中，因此我很好奇您是否在 Square onClick 方法中添加了 console.log(event)(如果它识别该事件)。