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);

我无法在其他任何地方找到如何使用nativebase Form进行onSubmit回调。

Answer 1

如果您查看原生基础文档，请说明。

＆＃34;注意：本机库中的表单只是输入的包装器，因此没有onSubmit函数＆＃34;

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

Answer 2

以下代码对我有用：

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

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

2 个答案: