Блог

Для чего используется параметр i в методе handleClick() ?

Почему мы не проходим мимо i , когда this.props.onClick() Square нас вызывают?

Является i ли объект событием?

 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){
        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)}
      
      />);
    }
  
    
 

Щелчок i в ручке указывает на индекс квадрата в this.state.squares массиве на доске. Если вы посмотрите на функцию renderSquare в Board, она возвращает квадрат с установленным значением prop onClick ()=> this.handleClick(i) , что означает, что при нажатии на квадрат он вызывает this.handleClick и сообщает i , какой квадрат был нажат.