代码之家 › 专栏 › 技术社区 › Asken

运行此时_登录“this”。导航“未定义”`

react-navigation react-native reactjs

-1

Asken · 技术社区 · 6 年前

我试图在函数内部导航 _login 而不是内联。在函数中 this.props.navigation 是 undefined .怎么了?

import React from 'react';
import { StyleSheet, Form, View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { Button, FormValidationMessage, FormLabel, FormInput } from 'react-native-elements';
import { AgendaScreen } from './AgendaScreen';

class HomeScreen extends React.Component {

  static navigationOptions = {
    title: 'Please sign in',
  };

  render() {
    return (
      <View style={styles.container}>
        <FormLabel>Username</FormLabel>
        <FormInput onChangeText={this.inputChanged} />
        <FormValidationMessage>{'This field is required'}</FormValidationMessage>
        <FormLabel>Password</FormLabel>
        <FormInput secureTextEntry={true} onChangeText={this.inputChanged} />
        <FormValidationMessage>{'This field is required'}</FormValidationMessage>
        <Button raised onPress={this._login} title="Sign in" />
      </View>
    );
  }

  inputChanged() {
    console.log('adfasdf');
  }

  _login() {
    this.props.navigation.navigate('Agenda');
    console.log('Logging in');
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

export default StackNavigator({
  Home: HomeScreen,
  Agenda: AgendaScreen
});

3 回复 | 直到 6 年前

Artem Mirchenko 6 年前

你需要绑定 _login 类的方法:

<Button raised onPress={this._login.bind(this)} title="Sign in" />

或声明 _登录名 方法作为箭头函数:

 _login = () => {
    this.props.navigation.navigate('Agenda');
    console.log('Logging in');
  }

Hamza El Aoutar 6 年前

路过时 _login 到您的 Button 失去价值的组件 this 。

解决方案是绑定 这 到 _登录名 ,例如,在 constructor :

this._login = this._login.bind(this);

或者您可以使用 Arrow functions :

<Button raised onPress={() => { this._login() }} title="Sign in" />

Leandro Soares 6 年前

首先,您正在尝试使用 this 将由另一个组件/函数调用的函数内部( Button )。

那个 按钮 不知道 这 因为它不在同一个上下文中。

您需要将该方法绑定到当前对象。

为此,我建议在构造函数中绑定它。

class HomeScreen extends React.Component {
    constructor(props, context) {
        super(props, context);
        this._login = this._login.bind(this);
    }

    render() {
        return (
            <View style={styles.container}>
                {/* MORE CODE */}
                <Button raised onPress={this._login} title="Sign in" />
            </View>
        );
    }

    // * MORE CODE *
}

其次,这应该在构造函数中完成,而不是在内联中完成。

如果是内联完成的,那么新功能分配给 onPress react将无需重新渲染该部分。

内联箭头函数也是如此。

编辑

第二部分仅适用于以下情况:

使用 PureComponent
使用 shouldComponentUpdate 匹配道具

但是,每次react渲染组件时,您都在创建不同的函数。还是很糟糕的做法。

编辑2(ES6)

防止使用 constructor 您可以使用箭头函数,但方式不同。喜欢 this 。

class MyComponent extends React.PureComponent {
  doWork = () => {
    // doing some work here.
  }

  render() {
    return <Text onPress={this.doWork}>Do Some Work</Text>
  }

}

这样,每个生命周期只创建一次函数。