如何在 React Native 中提交表单答案

【问题标题】：How to submit a form in React Native如何在 React Native 中提交表单
【发布时间】：2017-07-02 18:04:56
【问题描述】：

我在这里问这个问题感觉很疯狂，但是我找不到任何关于如何提交表单和为 RN 捕获数据的好的教程。我所做的一切都是有人推库“只需 npm install react-native-form-genie-magic-box 并在您的项目中调用它”...

但我只想知道 - 如何在原版 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 函数中捕获提交的电子邮件和密码？

【问题讨论】：

标签： javascript reactjs react-native native-base

【解决方案1】：

在<input 上，您需要添加类似这样的内容，例如：

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

当您使用onPress 函数时，您只需要获取 this.state.username 并在需要时使用它。我通常不执行处理Login 或其他.js 的函数，因此您需要将this.state.username 传递给处理它的page。

如果我真的需要将某些东西传递给其他page，我通常会使用GLOBALS，例如：

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

然后在处理它的page 上，您需要再次import 并使用GLOBAL.username。

如果您不理解它，请告诉我，我会尝试更好地解释它，我需要知道您是否想在不同的 .js 上处理 login，或者它可以在具有表单（像这样更容易）

【讨论】：

啊有趣。因此，RN 中的方法是 100% 使用受控输入，在每次更改后保存输入中的值，然后按下按钮只调用一些对这些数据执行某些操作的函数。我打算采用不受控制的输入方法，但这会奏效。谢谢你的好回答

【解决方案2】：

您好，您可以在 react 中使用以下 url 实现表单。 https://github.com/davidkpiano/react-redux-form/issues/383

【讨论】：