Comment soumettre un formulaire dans React Native

Question

Je me sens fou de poser cette question ici, mais je ne peux pas trouver de bons tutoriels de bons tutoriels pour la façon de soumettre un formulaire et de capturer les données pour RN. Tout ce que je trouve est quelqu'un pousse une bibliothèque « juste NPM installer réagir-forme-genie-magie natif boîte et l'appeler dans votre projet » ...

mais je veux juste savoir - Comment soumettre une forme dans la vanille Réagir natif.

Exemple de code:
AuthContainer

class AuthContainer extends Component { 
    render() { 
    const { errorMessage, handleLogin } = this.props 
    return (
    <Login 
     errorMessage={errorMessage} 
     onLoginClick={(e) => handleLogin(e)} 
    /> 
    ) 
    } 
} 
..... 

const mapDispatchToProps = (dispatch) => { 
    return { 
    handleLogin: (e) => { 
     e.preventDefault() 
     const form = e.target 
     const data = serialize(form, {hash: true}) 
     const creds = { email:data.email, password: data.password } 
     dispatch(loginUser(creds)) 
    }, 
    } 
} 

Connexion

import { Container, Content, Form, Item, Input, Label, Button, Text } from 'native-base'; 
.... 
const Login = ({errorMessage, onLoginClick}) => { 
    return (
    <Container> 
     <Content> 
     <Form > 
      {errorMessage && 
      <Text>{errorMessage}</Text> 
      } 
      <Item floatingLabel> 
      <Label>Email</Label> 
      <Input 
       type="email" 
       name="email" 
      /> 
      </Item> 
      <Item floatingLabel last> 
      <Label>Password</Label> 
      <Input secureTextEntry={true} /> 
      </Item> 
      <Button onPress={onLoginClick} ><Text>Sign in</Text></Button> 
     </Form> 
     </Content> 
    </Container> 
) 
} 

Question: Comment puis-je simplement saisir l'e-mail soumis et mot de passe en fonction handleLogin de AuthContainer?

Answer 1

Sur le <input vous avez besoin d'ajouter quelque chose comme ceci, par exemple:

<Input onChangeText={(text) => this.setState({username: text})} value={this.state.username} 

Et vous avez juste besoin lorsque vous utilisez la fonction onPress pour obtenir le this.state.username et l'utiliser quand vous voulez . Je ne fais généralement pas une fonction qui gère le Login ou quelque chose dans d'autres .js donc vous devez passer le this.state.username au page qui le gère.

Ce que je fais habituellement si je vraiment besoin de passer quelque chose à l'autre page utilise GLOBALS, par exemple:

// globals.js 
module.exports = { 
    username: '', 
}; 

Et puis d'utiliser le globals.js

// import the globals.js 
GLOBAL = require('./globals'); 

<Input onChangeText={(text) => this_onButtonPressed(text) value={this.state.username}/> 

_onButtonPressed(text){ 
    GLOBAL.username = this.state.username 
    // call function that handles it 
} 

Et puis sur le page que le manipule vous devez encore import et utilisez simplement GLOBAL.username.

Si vous ne comprenez pas, il me dit que je vais essayer de l'expliquer mieux, je dois savoir si vous voulez gérer la login sur un autre .js ou il peut être sur le .js qui a la forme (il est plus facile comme ceci)

Answer 2

Bonjour, vous pouvez utiliser l'URL suivante pour l'implémentation de formulaire dans rea. https://github.com/davidkpiano/react-redux-form/issues/383