React TypeError: this is undefined [дубликат]

135
23 июля 2019, 20:30

На данный вопрос уже ответили:

  • Потеря контекста вызова 5 ответов

Вообщем задача такая: написать компонент который будет возвращать тэг p и менять цвет при клике курсором на него. Я написал следующий компонент:

class Rgb extends React.Component
{
    constructor (props)
    {
        super(props);
        this.state = { color: "red" };
    }
    Cklicker () 
    {
        if (this.state.color == "red") this.setState({ color: "green" });
        if (this.state.color == "green") this.setState({ color: "blue" });
        if (this.state.color == "blue") this.setState({ color: "red" });
    }
    render () {
        return (<p onClick={this.Cklicker} style={this.state}>RGB</p>);
    }
} 

Но при нажатий вместо того что бы поменять цвет возникает ошибка:

TypeError: this is undefined Cklicker

  133 | }
  134 | Cklicker () 
  135 | {
> 136 |     if (this.state.color == "red") this.setState({ color: "green" });
  137 | ^   if (this.state.color == "green") this.setState({ color: "blue" });
  138 |     if (this.state.color == "blue") this.setState({ color: "red" });
  139 | }
Answer 1

React не устанавливает контекст для обработчиков событий. Добавьте this.Clicker = this.Clicker.bind(this) в конструктор.

Answer 2

Либо используй стрелочные функции. Они привязывают текущий контекст к функции.

Cklicker = () => { //код функции }
READ ALSO
Vue js Javascript контекст

Vue js Javascript контекст

Есть задача касательно js, vuejs https://codepenio/login2030/pen/VrxgPe

151
настройка css modules Webpack

настройка css modules Webpack

Пытаюсь подключить css modules в проект, но сыплется вот такая ошибка, что я делаю не так? "webpack": "312

166
Прототипное наследование

Прототипное наследование

Добрый ДеньИзучаю способы организации наследования в JavaScript и написал небольшой пример :

129
Django GIS и leaflet, как конвертировать zoom в radius?

Django GIS и leaflet, как конвертировать zoom в radius?

На клиенте я по умолчанию выставляю zoom равный 13:

134