如何在React Native中提交表單

我在這裏問這個問題很瘋狂，但我找不到任何關於如何提交表單和捕獲RN數據的很好的教程。我發現的一切是有人推庫「只是npm安裝react-native-form-genie-magic-box並將其稱爲您的項目」...如何在React Native中提交表單

但我只想知道 - 如何提交香草形式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功能提交的電子郵件地址和密碼？

來源

2017-07-02 tim5046

在<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，也可以是對的形式的.js（其更容易像這樣）

來源

2017-07-03 10:58:05 Brunaine

啊有趣。因此，RN中的方法是隻使用100％的受控輸入，每次更改後在其中保存輸入值，然後按下按鈕只需調用某些可以處理該數據的函數。我正在尋求一種不受控制的輸入方法，但這會起作用。謝謝你的好回答 – tim5046

嗨，你可以使用下面的URL在形式實現反應。 https://github.com/davidkpiano/react-redux-form/issues/383

來源

2017-07-03 07:16:27

如何在React Native中提交表單

回答

相關問題