提交时 DatePicker 输入值未传递给 Redux 表单答案

【问题标题】：DatePicker input value not pass to Redux Form when submit提交时 DatePicker 输入值未传递给 Redux 表单
【发布时间】：2019-06-19 14:27:22
【问题描述】：

我将 DatePicker 与 ReduxForm 一起使用。但是，当我单击提交按钮时，日期选择器的输入值不会传递给 Redux 表单。

我四处搜索并找到了来自this 的答案（我的renderDatePicker 代码来自那里），但它仍然对我不起作用。

我在模拟器上的表单演示：

这是我的代码：

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

【问题讨论】：

这个问题你解决了吗？

标签： react-native redux redux-form

【解决方案1】：

我认为这是因为您在 Field 组件中没有“更改”属性。

尝试添加更改功能，如下图：

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

【讨论】：