Почему кодactjs / mobx не рендерится, когда я использую жирную стрелку для метода рендера? - PullRequest
Новая
       8

Почему кодactjs / mobx не рендерится, когда я использую жирную стрелку для метода рендера?

0 голосов
/ 03 февраля 2019

Вот мой код: 

import React, {Component} from 'react';
import * as mobx from 'mobx';
import * as mobxReact from 'mobx-react';
import classNames from 'classnames';

import './CssClassApp.css';


@mobxReact.observer
export class CssClassApp extends Component {
    @mobx.observable.ref clapping: boolean = false;

    @mobx.action.bound
    startAnimate() {
        this.animating = true;
        setTimeout(() => this.stopAnimate(), 2000);
    };

    @mobx.action.bound
    stopAnimate() {
        console.log(`Stopping animation`)
        this.animating = false;
    };

    render() {
        return (
            <div>
                <input
                    className="button"
                    type="button"
                    value="Test"
                    onClick={this.startAnimate}
                />
                <div style={{transition: `border 1500ms ease-out`}}
                    className={classNames('normal', 
                        {'on': this.animating})}>
                    Testing timeout
                </div>
            </div>
        );
    }
}

и связанный с ним css 

.on {
    border: 5px solid red;
}

.normal {
    height: 100px;
    widows: 100px;
}

Работает нормально.

Но если я изменю render метод на render = () => граница не исчезает совсем.

Почему?Что вызывает эту ошибку здесь: react, mobx или typescript?

1 Ответ

0 голосов
/ 03 февраля 2019

Использование render = () => {} ваш this в {'on': this.animating})}> больше не привязан к одной и той же области видимости!Таким образом, ваш пользовательский интерфейс ведет себя по-разному.

Вы должны узнать, как правильно связать this в соответствии с вашими потребностями.Или вы просто оставляете синтаксис как есть, поскольку не нужно вообще менять синтаксис метода.

Это может быть хорошим источником информации:

https://medium.freecodecamp.org/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881

...