Question

我正在将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);

Answer 1

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

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

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

提交时DatePicker输入值未传递到Redux表单

1 个答案: