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

问题

将输入字段“email”传递给state的正确方法是什么，以便我可以在Firebase身份验证功能中使用它？

Answer 1

在您的问题中的代码中，您的Input组件正在this.onChangeText上调用onChangeText，这并未引用您传递给{{1}的相同功能来自prop。

LoginForm

将React Native输入字段传递给State

1 个答案: