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

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

“注意：本机基础中的表单只是输入的包装，因此没有 onSubmit 功能”

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

Answer 2

下面的代码对我有用：

<Button
  success
  style={{ paddingLeft: 5, marginTop: 10, marginLeft: 10 }}
  onPress={this.handleSubmit}>
    <Text>Submit</Text>
</Button>