Как передать данные из поля ввода в React Native? - PullRequest
Новая
       9

Как передать данные из поля ввода в React Native?

0 голосов
/ 25 мая 2020

Я использую 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);

1 Ответ

0 голосов
/ 26 мая 2020

«this» - ключевое слово, относящееся к экземпляру класса. «конструктор» также работает только так, как вы ожидаете от компонента класса. Поскольку вы пишете компонент функции вместо компонента класса, вы не можете их использовать. См. https://reactjs.org/docs/components-and-props.html#function -and-class-components .

Я предполагаю, что вы хотите получить электронное письмо, введенное пользователем, и отправить его в firebase auth. Вместо этого вы можете использовать useState hook . В компоненте Home объявите и определите его как 

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

И используйте его в компоненте TextInput как 

onChangeText={text => setEmail(text)}
...