React Native undefined ist kein Objekt (Bewertung 'this.onPressButton.bind')

Question

Für so "onPress = {this.onPressButton.bind (this)}" Ursache meiner Anwendung fehlschlagen?

Was kann ich tun, um es zu beheben? Ich glaube, dass es etwas damit zu tun hat, dass (das) unverbunden wird oder so?

Ich habe eine Komponente namens Anmeldung gemacht zu werden:

export default class Login extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     id:'login' 
    } 
} 

render() { 
    return(
     <KeyboardAvoidingView behavior="padding" style={style.container}> 
      <View style={style.logoContainer}> 
       <StatusBar barStyle="light-content" /> 
       <Image style={style.logo} source={require('../../image/Octocat.png')} /> 
       <Text style={style.logoText}> A Github app using React Native by{"\n"} Thomas Charlesworth</Text> 
      </View> 
      <View style={style.formContainer}> 
       <LoginForm /> 
      </View> 
     </KeyboardAvoidingView> 
    ); 
} 
} 

Und eine Login-Formular-Komponente:

export default class LoginForm extends Component { 

onPressButton(){ 
    this.props.navigator.push({ 
     id: 'splash', 
     passProps: { 
     // Your Props 
     } 
    }) 
} 

render() { 
    return(
     <View style={style.container}> 
      <TextInput 
       style={style.input} 
       placeholder="Username" 
       placeholderTextColor="rgba(255,255,255,0.5)" 
       returnKeyType="next" 
       autoCapitalize="none" 
       autoCorrect={false} 
       onSubmitEditing={()=> this.passwordInput.focus()} 
      /> 
      <TextInput 
       style={style.input} 
       secureTextEntry 
       placeholder="Password" 
       placeholderTextColor="rgba(255,255,255,0.5)" 
       returnKeyType="go" 
       ref={(input) => this.passwordInput = input} 
      /> 
      <TouchableOpacity 
       style={style.buttonContainer} 
       onPress={this.onPressButton.bind(this)} 
      > 
       <Text style={style.buttonText}> 
        LOGIN 
       </Text> 
      </TouchableOpacity> 
     </View> 
    ); 
} 
} 

Answer 1

schreiben sie dies wie:

Pass eine Funktion von übergeordneter Komponente:

<LoginForm update={this.update.bind(this)}> 

navigate(data){ 
    this.props.navigator.push({data}); 
} 

In Child-Komponente:

onPressButton(){ 
    let data = { 
     /*data*/ 
    } 
    this.props.navigate(data); 
}