Работают ли замыкания одинаково на методах класса?

Question

Я только начинаю изучать React.js (и Javascript), и у меня есть очень простой вопрос для вас, ребята.

Это рабочий пример небольшого компонента, который создает 3 кнопки, для которыхзначение увеличивается при каждом нажатии.

class Button extends React.Component {

handleClick = () => {
    this.props.onClickFunction(this.props.incrementValue);
}
render(){
    return(
    <button onClick={this.handleClick}>
        {this.props.incrementValue}
    </button>
    );
    }
}

const Result = (props) => {
    return(
    <div>{props.counter}</div>
  );
};

class App extends React.Component {
    state = {counter: 0};
  incrementCounter = (incrementValue) => {
    this.setState((prevState) => ({
            counter: prevState.counter + incrementValue
    }));
    };

    render() {
    return (
        <div>
        <Button incrementValue={2} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={10} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={99} onClickFunction={this.incrementCounter}/>
      <Result counter={this.state.counter}/>
    </div>
    );  
  }
}

ReactDOM.render(<App />, mountNode);

При работе с кодом я пытался изменить функцию handleClick.

class Button extends React.Component {

handleClick(){
    this.props.onClickFunction(this.props.incrementValue);
}
render(){
    return(
    <button onClick={this.handleClick}>
        {this.props.incrementValue}
    </button>
    );
    }
}

const Result = (props) => {
    return(
    <div>{props.counter}</div>
  );
};

class App extends React.Component {
    state = {counter: 0};
  incrementCounter = (incrementValue) => {
    this.setState((prevState) => ({
            counter: prevState.counter + incrementValue
    }));
    };

    render() {
    return (
        <div>
        <Button incrementValue={2} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={10} onClickFunction={this.incrementCounter}/>
      <Button incrementValue={99} onClickFunction={this.incrementCounter}/>
      <Result counter={this.state.counter}/>
    </div>
    );  
  }
}

ReactDOM.render(<App />, mountNode);

Теперь я получаю: UncaughtTypeError: Невозможно прочитать свойство 'props' из undefined в handleClick (eval at

Насколько я понимаю, анонимная функция handleClick = () => ... может получить доступ к реквизитамот родителя из-за замыкания, но почему волшебство останавливается, когда я заменяю его методом класса?

Answer 1

Ваша проблема не в замыканиях, а в том, как this работает в JS.В вашем рабочем примере

handleClick = () => {
    this.props.onClickFunction(this.props.incrementValue);
}

У вас есть функция стрелки, и в результате ваш this всегда указывает на ваш экземпляр, поэтому вы можете получить доступ к this.props.

В вашем нерабочем примере

handleClick(){
    this.props.onClickFunction(this.props.incrementValue);
}

У вас больше нет функции стрелки, поэтому теперь this больше не ссылается на ваш экземпляр при вызове функции.Вот почему вы не можете получить доступ к this.props.

. Вы можете исправить это, используя функцию стрелки, как у вас в рабочем случае, или вы можете привязать свою функцию к этому текущему экземпляру, чтобы убедиться, что this всегда указывает на ваш экземпляр.