Passing Reagieren indiaEingabeFeld

Question

Hintergrund

Ich arbeite mit einer React Native Anwendung auf staatlichen und ich habe ein Login-Formular. Das Login-Formular input Feld wird E-Mail an State auf button click übergeben. Ich versuche zu console.log das E-Mail-Feld. this.state.email aber ich bekomme E-Mail immer noch nicht definiert.

Ich habe die Firebase-Funktionen entfernt, um das Lesen zu erleichtern. Aber an der Spitze des Formulars ist die console.log nie erfolgreich.

Beispiele

Dies sind die Komponenten mit denen ich arbeite.

Eingangskomponente

Diese Eingangskomponente ist in Loginform verwendet werden.

class Input extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: '', 
     onChangeText: '' 
    } 
    } 

    render() { 
    return(
     <View}> 
     <Text>{this.props.label}</Text> 
     <TextInput 
      value={this.value} 
      onChangeText={this.onChangeText} 
     /> 
     </View> 
    ); 
    } 
} 

Loginform Component

class LoginForm extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     email: '', 
    }; 
    } 

    signIn() { 
    console.log(this.state.email); 
    } 

    render() { 
    return(
     <Card> 
     <CardSection> 
      <Input 
      value={this.state.email} 
      onChangeText={(email) => this.setState({email})} 
      /> 
     </CardSection> 
     <CardSection> 
      <Button 
      onPress={() => this.signIn()} 
      btnTxt='Sign In' 
      /> 
     </CardSection> 
     </Card> 
    ); 
    } 

Frage

Was ist der richtige Weg ist, um das Eingabefeld "E-Mail", um state so kann ich es in meiner Firebase-Authentifizierung übergeben Funktion?

Answer 1

Im Code in Ihrer Frage kennzeichnete, ist Ihre Input Komponente this.onChangeText auf onChangeText Aufruf wird diese Referenzierung nicht die gleiche Funktion, die Sie als prop von LoginForm weitergegeben.

class Input extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: '', 
     onChangeText: '', 
    }; 
    } 

    render() { 
    return (
     <View> 
     <Text>{this.props.label}</Text> 
     <TextInput 
      value={this.value} 
      onChangeText={email => this.props.onChangeText(email)} 
     /> 
     </View> 
    ); 
    } 
}