react-native - 如何在 nativebase 中处理 Form 的 onSubmit 函数？

Question

我想在 nativebase 中使用 redux-form，但它的工作方式与在 web 中使用的方式不同。我不认为我的 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 表单回调。

Answer 1

如果您查看 native 基础文档，它会说。

“注意:原生基础中的表单只是输入的包装器，因此没有 onSubmit 函数”

您应该定义自己的按钮或 touchablehighlight 并使用 onPress 回调