Почему this.state undefined в ответе native?

Я полный новичок в реале native, react.js и javascript. Я разработчик Android, поэтому хотел бы попробовать RN.

В основном разница в onPress;

Этот код показывает 'undefined' при запуске toggle():

class LoaderBtn extends Component {
    constructor(props) {
        super(props);
        this.state = { loading: false };
    }

    toggle() {
        console.log(this.state);
        // let state = this.state.loading;
        console.log("Clicked!")
        // this.setState({ loading: !state })
    }

    render() {
        return (
            <Button style={{ backgroundColor: '#468938' }} onPress={this.toggle}>
                <Text>{this.props.text}</Text>
            </Button>
        );
    }
}

но этот код работает:

class LoaderBtn extends Component {
    constructor(props) {
        super(props);
        this.state = { loading: false };
    }

    toggle() {
        console.log(this.state);
        // let state = this.state.loading;
        console.log("Clicked!")
        // this.setState({ loading: !state })
    }

    render() {
        return (
            <Button style={{ backgroundColor: '#468938' }} onPress={() => {this.toggle()}}>
                <Text>{this.props.text}</Text>
            </Button>
        );
    }
}

Вы можете объяснить мне разницу, пожалуйста?

В Java/Kotlin у нас есть ссылки на методы, в основном он передает функцию, если подписи одинаковы, например onPress = () => {} и toggle = () => {}

Но в JS это не работает: (

Ответ 1

Проблема, которая в первом примере toggle() не связана с правильным this.

Вы можете связать это в ctor:

constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    ...

Или используйте функцию экземпляра (ОК при некоторых обстоятельствах):

toggle = () => {
    ...
}

Этот подход требует изменений сборки через stage-2 или transform-class-properties.

Предостережение с функциями свойств экземпляра заключается в том, что для каждого компонента создается функция. Это нормально, если на странице их не так много, но об этом следует помнить. Некоторые библиотеки-насмешки также не очень хорошо справляются с функциями стрелок (т.е. функции стрелок не в прототипе, а в экземпляре).

Это основной JS; эта статья относительно шаблонов привязки React может помочь.

Ответ 2

Я думаю, что то, что происходит, - это вопрос масштаба. Когда вы используете onPress={this.toggle} это не то, что вы ожидаете в своей функции переключения. Однако функции стрелок демонстрируют различное поведение и автоматически связываются с this. Вы также можете использовать onPress={this.toggle.bind(this)}.

Дальнейшее чтение -

ES6 Arrow Функции

.bind()

Ответ 3

Что происходит в этом первом примере, так это то, что вы потеряли область "this". Обычно я определяю все свои функции в конструкторе следующим образом:

constructor(props) {
    super(props);
    this.state = { loading: false };
    this.toggle = this.toggle.bind(this);
}

Во втором примере вы используете синтаксис ES6, который автоматически свяжет это (именно поэтому это работает).

Затем внутри вашей функции onPress вы должны вызвать функцию, которую вы создали. Таким образом, это будет выглядеть примерно так,

onPress={this.toggle}