How to submit a form in React Native

Question

I feel crazy asking this question here, but I can't find any good tutorials for how to submit a form and capture the data for RN. Everything I do find is someone pushing a library "just npm install react-native-form-genie-magic-box and call it in your project"...

but I just want to know - How to submit a form in vanilla React Native.

Sample 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))
    },
  }
}

Login

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: How can I just capture the submitted email and password in AuthContainer's handleLogin function?

score 2 · Accepted Answer · answered Jul 03 '17 at 10:58

On the <input you need to add something like this, example:

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

And when you use the onPress function you just need to get the this.state.username and use it when you want. I don't usually do a function that handle the Login or something in other .js so you need to pass the this.state.username to the page that handles it.

What i usually do if I really need to pass something to other page is using GLOBALS, example:

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

And then to use the 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
}

And then on the page that handles it you need to import it again and just use GLOBAL.username.

If you didn't understand it tell me I will try to explain it better, I need to know if you want to handle the login on a different .js or it can be on the .js that has the Form (its easier like this)

Ah interesting. So the approach in RN is to just use controlled inputs 100%, where you save the values from the inputs after each change, and pressing the button just calls some function that does something with that data. I was going for an uncontrolled input approach, but this will work. Thanks for the good answer — tomtom, Jul 03 '17 at 16:35

score 0 · Answer 2 · answered Jul 03 '17 at 07:16

0

Hi you can use the following url for form implementation in react. https://github.com/davidkpiano/react-redux-form/issues/383

answered Jul 03 '17 at 07:16

Kamalkant Gaur

73
9

How to submit a form in React Native

2 Answers2