2017-05-19 49 views
1

我想在nativebase中使用redux-form,但它的工作方式與在web中使用的不一樣。我不認爲我的onSubmit回調沒有被調用,我不知道爲什麼。如何在nativebase中處理Form的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與nativebase窗口的回調。

回答

3

如果你看看它所說的原生基礎文檔。

「注:表中的本土基地就在輸入的包裝,因此沒有任何的onsubmit功能」

你應該定義你自己的按鈕或者touchablehighlight和使用onPress回調

+0

Dang..Did沒有看到那部分。非常感謝。 – ckim16