DatePicker input value not pass to Redux Form when submit

Question

I'm using DatePicker with ReduxForm. However, when I click submit button, the input value from Date Picker not pass to Redux Form.

I've search around and come across the answer from this (my code of renderDatePicker comes from there) but it still doesn't work for me.

My demo of the form on my Simulator:

Here's my code:

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

Have you solve this issue? – Vijay Singh Chouhan Feb 01 '19 at 05:21 — Vijay Singh Chouhan, Feb 01 '19 at 05:21

AlbertS · Answer 1 · 2019-01-25T21:07:42.107

I think this is because you do not have "change" attribute in the Field component.

Try to add change function as shown below:

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

Hope it will work for you.

I see that there is no onChange listener for DatePicker. May be you should use onDateChange. http://docs.nativebase.io/Components.html#picker-input-headref

DatePicker input value not pass to Redux Form when submit

1 Answers1