2017-05-19 14 views
1

nativexでredux-formを使いたいのですが、webで使うのと全く同じように動作しません。私はonSubmitコールバックが呼び出されていないと思うし、なぜ私はわからない。フォームのonSubmit関数をネイティブベースで処理する方法は?

import React, { Component } from 'react'; 
import { reduxForm, Field } from 'redux-form'; 
import { 
    Container, 
    Content, 
    Item, 
    Input, 
    Button, 
    Form, 
    Label, 
    Text, 
    Icon 
} from 'native-base'; 

import * as actions from '../actions'; 

class Signin extends Component { 
    handleFormSubmit({ username, password }) { 
    this.props.userSignIn({ username, password }); 
    } 

    renderUsername() { 
    return (
     <Item floatingLabel> 
     <Icon name="ios-person" /> 
     <Label>Username</Label> 
     <Input autoCorrect={false} autoCapitalize="none"/> 
     </Item> 
    ); 
    } 

    renderPassword() { 
    return (
     <Item floatingLabel> 
     <Icon name="ios-lock" /> 
     <Label>Password</Label> 
     <Input secureTextEntry={true} /> 
     </Item> 
    ); 
    } 

    renderLoginBtn() { 
    return (
     <Container style={styles.button}> 
     <Content> 
      <Button primary action="submit"> 
      <Text>Login</Text> 
      </Button> 
     </Content> 
     </Container> 
    ); 
    } 

    render() { 
    const { handleSubmit, fields: { username, password } } = this.props; 
    return (
     <Container style={styles.container}> 
     <Content> 
      <Form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
      <Field name="username" component={this.renderUsername} /> 
      <Field name="password" component={this.renderPassword} /> 
      {this.renderLoginBtn()} 
      </Form> 
     </Content> 
     </Container> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    errorMsg: state.auth.error 
    }; 
} 

export default reduxForm({form: 'signin', fields: ['username', 'password']}, mapStateToProps, actions)(Signin); 

onSubmitネイティブベースフォームのコールバックの使用方法は他にありません。

答えて

3

ネイティブベースのドキュメントを見ると、そのことが分かります。

「注:ネイティブベースでのフォーム入力単なるラッパーであり、したがって一切のonSubmit機能を持っていない」

あなたはボタンやtouchablehighlightを所有して定義し、コールバック

+0

Dang..DidをたonPress使用する必要がありますその部分を見ない。どうもありがとうございます。 – ckim16

関連する問題