@Tdvist

Что здесь является this?

Такая штука из оф сайта React "Введение"
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

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

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

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

  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')
);


Правильно ли я понимаю, что в момент {this.renderSquare(0)}
значения this пропсов, которые передаются в Square, опускаются и становятся равны Board.

Поэтому:
return (
      <Square 
        value={this.state.squares[i]} 
        onClick={() => this.handleClick(i)}
      />
    );


Становится:
return (
      <Square 
        value={Board.state.squares[0]} 
        onClick={() =>Board.handleClick(0)}
      />
    );


И потом, при клике на button, так происходит обработка события.

Если нет, то я не понимаю, как при клике обрабатывается this и вызывается this.handleClick(i) . Вроде как this иначе должен быть объект button, а у него нет такого метода.
  • Вопрос задан
  • 166 просмотров
Решения вопроса 1
Robur
@Robur
Знаю больше чем это необходимо
this будет равен тому что был установлен для функции в которой эта строка вызывается.

все. помимо этого не надо усложнять. Ничего никуда не опускается, ничего никуда не подставляется.

в строке this.renderSquare(0) эта функция render() для функции render в this будет экземпляр Board.
дальше уже вызывается renderSquare() в которой this - тот же самый экземпляр Board (все как и для render по сути)

в строке value={this.state.squares[i]} никакой this никуда не передается, из массива squares берется нужное значение и передается 'X' или 'O' без всяких board

в строке onClick={() => this.handleClick(i)}
используется стрелочная функция, для того чтобы вне зависимости от того как она будет вызвана в будущем, значение this осталось неизменным, таким каким оно было когда эта функция создавалась (this из renderSquare)

почитайте как они работают.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@8XL
Я не очень понял твоё понимание("великий и могучий..."), но суть такова:
(попытаюсь на пальцах, ибо сам в теории не силен)
в пропсы компонента Square опускается не только вэлью(крестик или нолик), но и setState, обернутый в handleClick. То есть, таким образом, кликая по баттону в Square, фактически ты меняешь состояние компонента Board (

handleClick(i) {
const squares = this.state.squares.slice();
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
squares: squares,
xIsNext: !this.state.xIsNext,
});
(вот тут).

А this. говорит реакту, что нужно передать handleClick из этого компонента.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы