Связывание с этим в React Native

     _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}
});

ОБНОВИТЬ

Я могу вызвать _onPressButton () из функции loginuser (имя пользователя, пароль) с помощью стрелочных функций '=>', но this.props.navigation.navigator ('Loc') не работает. alert ("пока") работает нормально, но this.props.navigation.navigator ('Loc'); не выполняется. Может быть, из-за привязки this. Кто-нибудь может мне с этим помочь?

P.S 'Loc' - это еще один класс, который отображает текущее местоположение и печатает его.

Можете ли вы показать вызов функции входа в систему, используется ли она => или как обратный вызов?

Revansiddh 13.07.2018 07:57

onPress = {() => this.loginuser (this.state.username, this.state.password)}

sap 13.07.2018 08:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
275
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать стрелочные функции как для метода вашего класса, так и для обратных вызовов 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);
    }
  });
};

Я внес эти изменения и все заработало, но вместо this._secondFunction (); я хочу использовать this.props.navigation.navigator ('Loc') ", и он ничего не делает внутри параметра успеха

sap 13.07.2018 06:18

@sap Хорошо, это расстраивает. Не могли бы вы включить в свой вопрос весь свой компонент и родительский компонент? Иначе будет сложно сказать, что не так.

Tholle 13.07.2018 12:56

Приносим извинения за неудобства. Я обновил код сейчас!

sap 13.07.2018 17:02

@sap success вообще запускается? Попробуйте вставить туда console.info или что-то в этом роде.

Tholle 13.07.2018 17:07

Да, успех идет нормально, даже _onPress был вызван после того, как вы предложили функции стрелок. (предупреждение в onpress () работает, а навигация - нет). Это проблема с использованием this внутри этой функции?

sap 13.07.2018 17:09

@sap _onPressButton также является стрелочной функцией, поэтому this должен быть именно таким, как вы ожидаете. Разве не this.props.navigation.navigate вместо this.props.navigation.navigator?

Tholle 13.07.2018 17:12

Боже, как я могу скучать по этому! Извините, что беспокою вас! Так что главным было использование стрелочных функций! Он работает! Большое спасибо за уделенное время

sap 13.07.2018 18:27

Другие вопросы по теме