0

我在“redux-form”旁边使用“react-datepicker”，我在控制台中不断收到这个错误......

Warning: Failed prop type: Invalid prop `selected` of type `String` supplied to `DatePicker`, expected instance of `Date`.

新版本的“react-datepicker”没有使用“moment()”，所以我找到的解决方案不起作用。

这是我的表单组件的样子......

import React, { Component } from "react";
import { compose } from "redux";
import { connect } from "react-redux";
import { reduxForm, Field } from "redux-form";
import DateInput from "../../form/DateInput";
import { subDays } from "date-fns";
import {
    combineValidators,
    isRequired
} from "revalidate";

class SignUpForm extends Component {
    onFormSubmit = values => {
        console.log(values);
    };

    render() {
        const { invalid, submitting, pristine } = this.props;
        return (
            <form onSubmit={this.props.handleSubmit(this.onFormSubmit)}>
                <Field
                    name="birthdate"
                    component={DateInput}
                    label="Birth Date"
                    dateFormat="yyyy-MM-dd"
                    showMonthDropdown
                    showYearDropdown
                    dropdownMode="select"
                    maxDate={subDays(new Date(), 366 * 18)}
                    showDisabledMonthNavigation
                />

                <Button
                    disabled={invalid || submitting || pristine}
                    type="submit"
                    size="big"
                    theme="black"
                >
                    Sign In
                </Button>
            </form>
        );
    }
}

const validate = combineValidators({
    birthdate: isRequired({ message: "Please choose your date of birth." })
});

export default compose(
    connect(
        null,
        actions
    ),
    reduxForm({ form: "signupForm", enableReinitialize: true, validate })
)(SignUpForm);

下面是“DateInput”组件的样子......

import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const DateInput = ({
    input: { value, onChange, ...restInput },
    label,
    meta: { touched, error, dirty },
    ...props
}) => {
    let groupClasses = touched && !!error ? "input-group error" : "input-group";

    return (
        <div className={groupClasses}>
            <DatePicker
                {...props}
                selected={value ? value : null}
                onChange={onChange}
                {...restInput}
            />
            {touched && !!error && <span className="error">{error}</span>}
        </div>
    );
};

export default DateInput;

任何帮助，将不胜感激。

4

1 回答 1

1

看起来value提供给selected道具的格式不正确。该值可能是由 提供的字符串redux-form。如果格式正确，您可以从字符串中创建日期：new Date(value)。

selected={value ? new Date(value) : null}

您还可以使用parse提供的功能redux-form。

于 2019-02-15T17:51:36.133 回答