Question

我正在查看react docs，但我坚持这样做：

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，但是事件似乎并不依赖于此。它们也没有arguments，但是事件几乎可以访问而无需在参数中指定。而且我也怀疑super是否与它有关。对此我将不胜感激。谢谢。

Answer 1

https://reactjs.org/docs/events.html 我认为问题可能是在第一种情况下，您直接在事件处理程序中进行console.log（event）。在第二种情况下，您的事件处理程序实际上是在Square类中的，所以我很想知道您是否在Square onClick方法中添加了console.log（event）如果它可以识别事件。

由于“提升状态”而无法访问事件对象

1 个答案: