Значение ввода DatePicker не передается в форму Redux при отправке - PullRequest
Новая
       33

Значение ввода DatePicker не передается в форму Redux при отправке

0 голосов
/ 25 января 2019

Я использую DatePicker с ReduxForm.Однако, когда я нажимаю кнопку «Отправить», значение ввода из средства выбора даты не передается в форму Redux.

Я искал и нашел ответ от этого (мой код от renderDatePicker оттуда), но он все еще не работает для меня.

Моя демонстрация формы на моем симуляторе: enter image description here

Вот мой код: 

import React, { Component } from 'react';
import {
    View, Text, Button, Icon, Container, Item,
    Input, Label, Content, Form, Picker, Footer, DatePicker
} from 'native-base';

import { Field, reduxForm } from 'redux-form';
import { addTransactionItem } from '../redux/ActionCreators';
import moment from 'moment';
import { connect } from 'react-redux';


const mapDispatchToProps = dispatch => ({
    addTransactionItem: (transactionItem) => dispatch(addTransactionItem(transactionItem))
})

class AddTransaction extends Component {
constructor(props) {
    super(props);
    this.renderField = this.renderField.bind(this);
    this.submit = this.submit.bind(this);
    this.renderDatePicker = this.renderDatePicker.bind(this);
}


renderDatePicker = ({ input, placeholder, defaultValue, meta: { touched, error }, label ,...custom }) => (
    <Item>
        <Label>{label}</Label>
        <DatePicker {...input} {...custom} dateForm="MM/DD/YYYY" 
                                onChange={(value) => input.onChange(value)}
                                autoOk={true}
                                selected={input.value ? moment(input.value) : null} />
        {touched && error && <span>{error}</span>}
    </Item>
);



submit = values => {
    alert(`The values are ${JSON.stringify(values)}`)
    const transactionItem = JSON.parse(JSON.stringify(values))
    this.props.addTransactionItem(transactionItem);
    const { navigate } = this.props.navigation;
    navigate('Home');
}

render() {
    const { handleSubmit } = this.props
    return (
        <>
            <Form>

                <Field keyboardType='default' label='Date' component={this.renderDatePicker} name="date" />
            </Form>
            <Button full light onPress={handleSubmit(this.submit)}>
                <Text>Submit</Text>
            </Button>
        </>
    );
}
}

AddTransaction = connect(null, mapDispatchToProps)(AddTransaction);

export default reduxForm({
    form: 'addTransaction',
})(AddTransaction);

1 Ответ

0 голосов
/ 25 января 2019

Я думаю, это потому, что у вас нет атрибута "изменить" в компоненте поля.

Попробуйте добавить функцию изменения, как показано ниже: 

renderDatePicker = (
  {
    input,
    placeholder,
    defaultValue,
    meta: { touched, error },
    label ,
    ...custom,
    change
  }
) => (
    <Item>
        <Label>{label}</Label>
        <DatePicker {...input} {...custom} dateForm="MM/DD/YYYY" 
                                onDateChange={change}
                                autoOk={true}
                                selected={input.value ? moment(input.value) : null} />
        {touched && error && <span>{error}</span>}
    </Item>
);

render() {
    const { handleSubmit, change } = this.props
    return (
        <>
            <Form>
                <Field
                  keyboardType='default'
                  label='Date'
                  component={this.renderDatePicker}
                  name="date"
                  change={change}
                />
            </Form>
            <Button full light onPress={handleSubmit(this.submit)}>
                <Text>Submit</Text>
            </Button>
        </>
    );
}

Надеюсь, это сработает для вас.

Я вижу, что для DatePicker нет прослушивателя onChange. Может быть, вы должны использовать onDateChange. http://docs.nativebase.io/Components.html#picker-input-headref

...