在 React Native 中与 this 绑定

Question

     _onPressButton =(username) =>{
        // alert("bye")
        this.props.navigation.navigator('Loc');
      }

     loginuser = (username, password) =>{

        Parse.User.logIn(username, password, {
        success: (user) =>  {
          // Do stuff after successful login.
            // 
            this._onPressButton(username);
            alert("hello")

        },
        error: (user, error) => {
          // The login failed. Check error to see why.
          alert("Error: " + error.code + " " + error.message);
        }
       });
      }

    render(){
    let { username } = this.state.username;
    return(

        <View style= {styles.container}>
              <TextField
                  inputContainerStyle={{ justifyContent: 'center', marginTop:30,marginLeft:50, marginRight:50, }}
                  inputStyle={{textAlign: 'center',justifyContent: 'center', backgroundColor: 'rgba(255,255,255,0.5)'}}
                  titleTextStyle={{ textAlign: 'center',justifyContent: 'center', }}
                  label='Username'
                  value={this.state.username}
                  onChangeText={ (username) => this.setState({ username}) }
              />

              <TextField
                  inputContainerStyle={{ justifyContent: 'center', marginTop:0,marginLeft:50, marginRight:50, }}
                  inputStyle={{textAlign: 'center',justifyContent: 'center', backgroundColor: 'rgba(255,255,255,0.5)'}}
                  titleTextStyle={{ textAlign: 'center',justifyContent: 'center', }}
                  label='Password'
                  secureTextEntry={true}
                  value={this.state.password}
                  onChangeText={ (password) => this.setState({ password}) }
              />

            <View>
              <TouchableOpacity
                  style={styles.loginScreenButton}
                   // onPress={() => this._onPressButton()}
                   onPress={() => this.loginuser(this.state.username, this.state.password)}
                  underlayColor='#fff'>
               <Text 
               style={styles.loginText}> Login </Text>
              </TouchableOpacity>
            </View>

        </View>
      );
    }
  }
  export default Project = createStackNavigator({
    Login: { screen: Login },
    Loc: { screen: Loc}
});

更新

我可以使用箭头函数“=>”从函数 loginuser(username,password) 调用 _onPressButton()，但是 this.props.navigation.navigator('Loc') 不工作。 alert("bye") 工作正常但是 this.props.navigation.navigator('Loc');不执行。可能是因为绑定 'this' 。有人可以帮我吗？

P.S 'Loc' 只是另一个 class 呈现当前位置并打印它。

Answer 1

您可以对 class 方法和 success/error 回调使用箭头函数来获取封闭执行上下文的 this 值。由于您不使用 await，因此您也可以跳过 async 关键字。

loginuser = (username, password) => {
  Parse.User.logIn(username, password, {
    success: (user) => {
      // Do stuff after successful login.
      this._secondFunction();
    },
    error: (user, error) => {
      // The login failed. Check error to see why.
      alert("Error: " + error.code + " " + error.message);
    }
  });
};

在 React Native 中与 this 绑定

Binding with this in React Native

javascript

reactjs

this

native