通過が

Question

背景

私はReact Nativeアプリケーションで作業していると私は、ログインフォームを持っているの状態にネイティブ入力フィールドを反応します。ログインフォームinputは、button clickにメールを送信しています。 私はconsole.logにメールフィールドをしようとしています。 this.state.emailしかし、私は電子メールを取得し続けています。

私は読みやすいようにfirebase関数を削除しました。しかしフォームの上部にはconsole.logは決して成功しません。

例

これらは、私が働いているコンポーネントです。

入力コンポーネント

この入力コンポーネントは、LoginFormに使用されます。

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コンポーネント

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

質問ので、私は私のFirebase認証で使用することができますstateに入力フィールド "電子メール" を渡すために適切な方法は何ですか

関数？

Answer 1

あなたの質問で取り上げたコードでは、あなたのInputコンポーネントはonChangeTextにthis.onChangeTextを呼び出している、これはあなたがLoginFormからpropとして受け継が同じ機能を参照していません。

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