React Nativeでフォームを送信する方法

Question

ここでこの質問をするのは夢中ですが、フォームを送信してRNのデータをキャプチャする方法についての良いチュートリアルは見つかりません。私は見つけるのですかすべてが誰かがライブラリを推進している「ジャストNPMインストール・ネイティブ・フォーム・精霊・マジック・ボックスを反応させると、プロジェクトでそれを呼び出す」...

を私はちょうど知ってほしい - どのように提出しますバニラの形態原産のネイティブ。

サンプルコード：
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

。 私は通常、Loginまたはそれ以外の.jsを処理する関数を実行しないので、this.state.usernameを処理するpageに渡す必要があります。私は通常、私は本当にGLOBALSを使用している他のpageに何かを渡す必要がある場合には、例えば、何

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

を使用するために、その後

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

をそしてそして、上のpageことimportに再度それを処理し、GLOBAL.usernameを使用します。

あなたはそれは私がより良いそれを説明しようとする私に教えて理解していなかった場合、私はあなたが別の.jsにloginを処理するかどうかを知る必要があり、あるいは、フォーム（その簡単に持って.jsにすることができこのように）

Answer 2

こんにちは、あなたは反応のフォーム実装に次のURLを使用することができます。

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

そして、あなたはonPress機能を使用するときにだけthis.state.usernameを取得し、お好きな時にそれを使用する必要があります：<inputあなたはこのようなもの、例を追加する必要がオン https://github.com/davidkpiano/react-redux-form/issues/383