В дополнение к настройке и обновлению state вы также можете определить методы для вашего класса компонента. Метод класса обычно должен использовать ключевое слово this, чтобы он мог обращаться к свойствам конечного инстанса класса (например, this.state и this.props ) внутри области действия метода. Существует несколько способов разрешить доступ к this методам класса. Один из распространенных способов заключается в том, чтобы явно связать this в конструкторе, чтобы this стало привязано к методам класса, когда компонент инициализирован. Возможно, вы заметили, что последний вызов использовал

this.handleClick = this.handleClick.bind(this)

Примечание: 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 (:11:11) at :16:3

Редактор кода имеет компонент с state, которое отслеживает количество элементов. Он также имеет метод, который позволяет вам увеличивать количество этого элемента. Однако этот метод не работает , потому что он использует ключевое слово this, которое не определено. Исправьте его, явно привязывая this к методу addItem() в конструкторе компонента. Затем добавьте обработчик кликов к элементу button в методе рендеринга. Он должен вызывать метод addItem() когда кнопка получает событие щелчка. Помните, что метод, который вы передаете обработчику onClick требует фигурные скобки, потому что его следует интерпретировать непосредственно как JavaScript. После того, как вы выполните вышеуказанные шаги, вы сможете щелкнуть по кнопке и увидеть инкремент количества элементов в HTML.

Вы можете создать более сложный компонент, поддерживающий состояние, путем объединения концепций, рассмотренных ранее. К ним относятся инициализация state, методы записи, которые устанавливают state и назначение обработчиков кликов для запуска этих методов.

Компонент Counter отслеживает значение count в state . Есть две кнопки, которые вызывают методы increment() и decrement() . Запишите эти методы, чтобы значение счетчика увеличивалось или уменьшалось на 1 при нажатии соответствующей кнопки. Кроме того, создайте метод reset() чтобы при нажатии кнопки сброса счетчик был установлен на 0.

Примечание. Убедитесь, что вы не изменяете className кнопок. Кроме того, не забудьте добавить необходимые привязки для вновь созданных методов в конструкторе.

Вы можете использовать state в приложениях React более сложными способами, чем то, что вы видели до сих пор. Один из примеров - контролировать состояние значения, а затем визуализировать пользовательский интерфейс на основе этого значения. Существует несколько способов сделать это, и редактор кода показывает один метод.

MyComponent имеет свойство visibility которое инициализируется со значением false (логическое) . Метод рендеринга возвращает одно представление, если значение visibility истинно, и другое, если оно ложно. В настоящее время не существует никакого способа обновления состояния visibility в компоненте. Значение должно переключаться между true и false. На кнопке есть обработчик клика, который запускает метод класса, называемый toggleVisibility() . Определите этот метод, чтобы state.visibility переключилось в противоположное значение при вызове метода. Если visibility === false , метод устанавливает значение true и наоборот. Наконец, нажмите кнопку, чтобы увидеть условный рендеринг компонента на основе его state . Подсказка: не забудьте связать ключевое слово this с методом в конструкторе.

В дополнение к настройке и обновлению state вы также можете определить методы для вашего класса компонента. Метод класса обычно должен использовать ключевое слово this, чтобы он мог обращаться к свойствам конечного инстанса класса (например, this.state и this.props ) внутри области действия метода. Существует несколько способов разрешить доступ к this методам класса. Один из распространенных способов заключается в том, чтобы явно связать this в конструкторе, чтобы this стало привязано к методам класса, когда компонент инициализирован. Возможно, вы заметили, что последний вызов использовал

this.handleClick = this.handleClick.bind(this)

Примечание: 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 (:11:11) at :16:3

Редактор кода имеет компонент с state, которое отслеживает количество элементов. Он также имеет метод, который позволяет вам увеличивать количество этого элемента. Однако этот метод не работает , потому что он использует ключевое слово this, которое не определено. Исправьте его, явно привязывая this к методу addItem() в конструкторе компонента. Затем добавьте обработчик кликов к элементу button в методе рендеринга. Он должен вызывать метод addItem() когда кнопка получает событие щелчка. Помните, что метод, который вы передаете обработчику onClick требует фигурные скобки, потому что его следует интерпретировать непосредственно как JavaScript. После того, как вы выполните вышеуказанные шаги, вы сможете щелкнуть по кнопке и увидеть инкремент количества элементов в HTML.