Привязать this к методу класса
В дополнение к настройке и обновлению state вы также можете определить методы для вашего класса компонента. Метод класса обычно должен использовать ключевое слово this, чтобы он мог обращаться к свойствам конечного инстанса класса (например, this.state и this.props ) внутри области действия метода. Существует несколько способов разрешить доступ к this методам класса. Один из распространенных способов заключается в том, чтобы явно связать this в конструкторе, чтобы this стало привязано к методам класса, когда компонент инициализирован. Возможно, вы заметили, что последний вызов использовал
this.handleClick = this.handleClick.bind(this)handleClick в конструкторе. Затем, когда вы вызываете функцию типа this.setState() внутри вашего метода класса, this относится к классу и не будет undefined.
Примечание: this - ключевое слово является одним из наиболее запутанных аспектов JavaScript , но он играет важную роль в React. Хотя его поведение здесь совершенно нормальное, эти уроки не являются местом для углубленного обзора this поэтому, пожалуйста, обратитесь к другим урокам, если приведенное выше смущает. Полезные статьи в MDN:
- this
- Function.prototype.bind()
Примечание 2: Сейчас использовать bind не модно, а главное - не удобно. Для примера, у нас в классе компонента может быть много методов и много строк кода. При этом все "бинды" мы навешиваем в конструкторе, который от конечных методов могут отделять многие строки. И вот когда мы читаем код, нам не всегда понятно, глядя на конечный метод, есть ли где-то на него "бинды" или нет. И именно в таких случаях удобней использовать стрелочные функции. Стрелочные функции сразу "замыкаются" на тот инстанс, в котором они объявлены, и в них this всегда ведет на текущий инстанс. С другой стороны важно понимать, что стрелочные функции - это всего лишь синтаксический сахар, и важное ограничение здесь в том, что стрелочную нельзя вызывать через super. Пример такого кода:
class Parent {
test = () => {
console.log(this);
}
}
class Child extends Parent {
test = () => {
console.log(this);
super.test();
}
}
const c = new Child();
c.test();
Здесь у нас console.log будет только один раз вызывано в Child::test, а вот вызов super.test() развалится с ошибкой.
Uncaught TypeError: (intermediate value).test is not a function
at Child.test (
Редактор кода имеет компонент с state, которое отслеживает количество элементов. Он также имеет метод, который позволяет вам увеличивать количество этого элемента. Однако этот метод не работает , потому что он использует ключевое слово this, которое не определено. Исправьте его, явно привязывая this к методу addItem() в конструкторе компонента. Затем добавьте обработчик кликов к элементу button в методе рендеринга. Он должен вызывать метод addItem() когда кнопка получает событие щелчка. Помните, что метод, который вы передаете обработчику onClick требует фигурные скобки, потому что его следует интерпретировать непосредственно как JavaScript. После того, как вы выполните вышеуказанные шаги, вы сможете щелкнуть по кнопке и увидеть инкремент количества элементов в HTML.