如何在本机反应中从输入字段传递数据？

Question

我正在使用https://github.com/expo-community/expo-firebase-starter作为入门模板来构建使用 firebase 的反应原生应用程序。

我正在使用 Home.js 中的以下文件，并且想做一些事情，但遇到了一些问题。

获取输入字段的值 - 我正在尝试在此文件中执行构造函数（道具）以获取输入字段的内容，但是当我尝试执行此操作时不断收到错误消息。

传递用户数据 - 我正在尝试获取已登录用户的详细信息。目前，我正在使用 firebase.checkUserAuth; 如何使用“this.state.user”保存“用户”内容的数据。 当我尝试这样做时，我不断遇到错误。

    import React, {useEffect } from "react";
    import { StyleSheet, Text, View } from "react-native";
    import { Container, Content, Header, Form, Input, Item, Label } from 'native-base';
    import { Button } from "react-native-elements";
    import { withFirebaseHOC } from "../config/Firebase";

    function Home({ navigation, firebase }) {

      useEffect(() => {
        try {

          firebase.checkUserAuth(user => {
            if (user) {
              // if the user has previously logged in
              console.log(user);
              // navigation.navigate("App");
            } else {
              // if the user has previously logged out from the app
              navigation.navigate("Auth");
            }
          });
        } catch (error) {
          console.log(error);
        }
      }, []);

      async function postReflection() {

        try {
          await alert('test');
        } catch (error) {
          console.log(error);
        }
      }

      async function handleSignout() {
        try {
          await firebase.signOut();
          navigation.navigate("Auth");
        } catch (error) {
          console.log(error);
        }
      }

      return (
        <Container style={styles.container}>

              <Form>
                <Item floatingLabel>
                  <Label>Reflection</Label>
                  <Input 
                    autoCapitalize='none'
                    autoCorrect={false}
                    // onChangeText = {(email)}
                  />
                </Item>

                  <Button style = {{ marginTop: 10, marginHorizontal:30 }}
                    title="Share"
                    rounded
                    onPress= {postReflection}
                    >
                  </Button>
                  </Form>



          {/* <Text>Home</Text>
          <Button
            title="Signout"
            onPress={handleSignout}
            titleStyle={{
              color: "#F57C00"
            }}
            type="clear"
          /> */}
        </Container>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#fff",
        // justifyContent: "center"
      }
    });

    export default withFirebaseHOC(Home);

Answer 1

“this”是一个关键字，指的是 class 的一个实例。 “构造函数”也只能在 class 组件中按预期工作。 当您编写 function 组件而不是 class 组件时，您不能使用它们。 请参阅https://reactjs.org/docs/components-and-props.html#function-and-class-components 。

我猜你想要做的是获取用户输入的 email，然后发送到 firebase auth。 因此，您可以改用useState hook 。 在 Home 组件中，像这样声明和定义它

const [email, setEmail] = useState('');

并在 TextInput 组件中使用它，例如

onChangeText={text => setEmail(text)}