如何在React Native中提交表單

Question

我在這里問這個問題很瘋狂，但我找不到任何關於如何提交表格和捕獲RN數據的好教程。 我找到的所有東西都是有人推動一個圖書館“只需要安裝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函數中捕獲提交的電子郵件和密碼？

Answer 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 ，或者它可以在具有Form的.js上（它更容易這樣）

Answer 2

您好，您可以使用以下網址進行反應中的表單實現。 https://github.com/davidkpiano/react-redux-form/issues/383