如何在React Native中提交表单

如何在React Native中提交表单

问题描述:

我在这里问这个问题很疯狂,但是我找不到任何好的教程,介绍如何提交表格并为RN捕获数据。我找到的所有东西都是有人在推动图书馆只是npm安装react-native-form-genie-magic-box并在你的项目中调用它...

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"...

但我只想知道 - 如何以香草 React Native 提交表单。

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

示例代码:

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

登录

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

问题:如何在AuthContainer的 handleLogin $ c中捕获提交的电子邮件和密码$ c> func重刑?

Question: How can I just capture the submitted email and password in AuthContainer's handleLogin function?

< input 上你需要添加这样的东西,例如:

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

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

当你使用 onPress 函数时,你只需要获取this.state.username并在需要时使用它。
我通常不会执行一个函数来处理 Login 或其他 .js 中的内容所以你需要将 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.

如果我真的需要将某些内容传递给其他页面我通常会使用 GLOBALS ,例如:

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

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

然后使用 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
}

然后在处理它的页面上你需要再次导入然后只使用GLOBAL.username。

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

如果您不明白它告诉我我会尝试更好地解释它,我需要知道你是否想要在另一个 .js 上处理登录,或者它可以在 .js 有表格(这样更容易)

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)