登录表单 React Native 和 Apollo

Posted 2023-03-08

【中文标题】登录表单 React Native 和 Apollo

【英文标题】：Login Form React Native and Apollo

【发布时间】：2019-06-03 14:35:06

【问题描述】：

我在开发一个真正的项目时正在学习 Graphql，它很棒，我已经构建了服务器，Apollo 服务器很棒，现在问题是反应客户端，它有和标签，我不知道如何运行突变单击表单的按钮。提前致谢。

突变

const LOGIN_CUSTOMER = gql`

mutation LoginCustomers($email: String!, $password: String!) 
    loginCustomers(input:  email: $email, secretop: $password ) 
      sign
      email
      id
    
  
`;

变异函数

const  email, password  = this.state;
    return (
      <Mutation
        mutation=LOGIN_CUSTOMER
        variables= email, password 
        onCompleted=data => 
          console.log("MUTATION_DATA", data);
          AsyncStorage.setItem("token", data.token);
          AsyncStorage.setItem("email", data.email);
          AsyncStorage.setItem("_id", data._id);
          this.props.navigation.navigate("App");
        
      >
        (loginCustomers,  data ) => (
          <Container>
            <Content>
              <Image
                source=require("../../assets/images/log-header.jpg")
                style= height: 300, width: null, flex: 1 
              />

              <Form style= paddingLeft: 15, paddingRight: 15 >
                <Item>
                  <Input
                    keyboardType="email-address"
                    autoCapitalize="none"
                    onChangeText=value => 
                      this.changeStateValues("email", value);
                    
                    placeholder="Email"
                  />
                </Item>
                <Item last>
                  <Input
                    secureTextEntry=true
                    onChangeText=value => 
                      this.changeStateValues("password", value);
                    
                    placeholder="Contraseña"
                  />
                </Item>

                <Button
                  style= marginTop: 20 
                  full
                  warning
                  onPress=() => this.signIn()
                >
                  <RobotoText style=styles.ingreso>Ingresar</RobotoText>
                </Button>

                <Button
                  onPress=() => this.props.navigation.navigate("Forgot")
                  transparent
                  full
                >
                  <RobotoText style= color: "#E3A80D" >
                    Perdí mi contraseña
                  </RobotoText>
                </Button>
              </Form>
            </Content>

            <Footer>
              <Button onPress=() => this.setType() transparent>
                <RobotoText>Registrarse</RobotoText>
              </Button>
            </Footer>
          </Container>
        )
      </Mutation>
    );

【参考方案1】：

您的表单可能看起来像这样......

<Form method="POST" onSubmit=async event => 
  event.preventDefault()
  await loginCustomer()
>

【讨论】：

您好，感谢您的重播，React Native 中的表单没有 onSubmit 处理程序，所以不能这样做。

噢！我很笨！我给了你网上的答案。在我的移动应用程序中，我使用 HOC 模式，所以我只需将 loginCustomer 拉出 props 并在我的 handleLogin 中执行它。我相信如果你从 apollo 导入 client 并做类似 client.mutation.loginCustomer() 的事情，你可以做类似的事情，但我现在还没有准备好验证这一点。希望有帮助

【参考方案2】：

毕竟，这就是我所做的，传递一个带有突变名称的回调并在按下时触发它 （登录，数据）=>（

                  <Form
                    style=
                      paddingLeft: 15,
                      paddingRight: 15
                    
                  >
                    <Item>
                      <Input
                        keyboardType="email-address"
                        autoCapitalize="none"
                        onChangeText=value => 
                          this.changeStateValues("email", value);
                        
                        placeholder="Email"
                        value=this.state.email
                      />
                    </Item>
                    <Item last>
                      <Input
                        secureTextEntry=true
                        onChangeText=value => 
                          this.changeStateValues("password", value);
                        
                        placeholder="Contraseña"
                        value=this.state.password
                      />
                    </Item>

                    <Button
                      style= marginTop: 20 
                      full
                      warning
                      onPress=() => 
                        login(
                          variables: 
                            email: this.state.email,
                            password: this.state.password
                          
                        )
                          .then((res: any) => 
                            signIn(res.data.login.token);
                            this.props.navigation.navigate("App");
                          )
                          .catch(err => (
                            <RobotoText style=styles.ingreso>
                              err
                            </RobotoText>
                          ));
                      
                    >
                      <RobotoText style=styles.ingreso>Ingresar</RobotoText>
                    </Button>

                    <Button
                      onPress=() => this.props.navigation.navigate("Forgot")
                      transparent
                      full
                    >
                      <RobotoText style= color: "#E3A80D" >
                        Perdí mi contraseña
                      </RobotoText>
                    </Button>
                  </Form>
                </Content>

                <Footer>
                  <Button
                    onPress=() => this.props.navigation.navigate("Signup")
                    transparent
                  >
                    <RobotoText style=>Registrarse</RobotoText>
                  </Button>
                </Footer>
              </Container>
            )
          </Mutation>