В приведенном ниже фрагменте кода я не понимаю, как this управляется React.

class Main extends React.Component {
    private name: string

    constructor(props: any) {
        super(props)
        this.name = 'heisenberg'
    }
    render() {
        return (
            <div>
                {this.sayMyName()}
                <button onClick={this.sayMyName}>Say My Name</button>
            </div>
        )
    }
    sayMyName(): string {
        return this.name
    }
}

Сначала он печатает heisenberg на странице, и когда я нажимаю кнопку, он говорит, что this равно undefined, что мне ясно, что React не связывает автоматически { {X4}} для всех методов.

Итак, как именно меняется контекст, когда я вызываю метод sayMyName непосредственно из {}, а затем нажатием кнопки.

Добавление скриншота

Перед нажатием кнопки введите описание изображения здесь

После нажатия кнопки введите описание изображения здесь

2
Parnab Sanyal 26 Сен 2018 в 00:30

2 ответа

Лучший ответ

Событие onclick является асинхронным. Когда обратный вызов вызывается, он вызывается из глобального контекста, поэтому для this устанавливается объект window в нестрогом режиме или undefined в строгом режиме.

Чтобы исправить это, либо создайте стрелочную функцию в методе рендеринга (стрелочные функции принимают свое значение this из контекста, в котором они определены), либо передайте это кнопке:

<button onClick={event => this.sayMyName(event)}>Say My Name</button>

Или создайте связанную версию sayMyName

constructor(props: any) {
    super(props);
    this.name = 'heisenberg';
    this.sayMyName = this.sayMyName.bind(this);
}
6
Nicholas Tower 25 Сен 2018 в 21:53

https://medium.freecodecamp.org/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb

Этот человек написал хорошую статью по вашему вопросу. По сути, он говорит, что вы можете винить в этом JavaScript.

Короче говоря, контекст this не теряется ... он более или менее указывает на глобальный объект

2
Demon 25 Сен 2018 в 21:53