React-widgets DateTimePicker抛出错误'无法读取未定义的属性'oneOfType'

时间:2019-05-14 19:03:14

标签: reactjs redux-form react-widgets

我使用的是redux表单,其示例中有来自react-widgets的日期时间选择器。 Redux-Form react-widgets example

在此页面上的示例中,它具有指向react-widgets的链接。我几乎在redux-forms网站上关注了该示例,但不断收到以下错误:

TypeError:无法读取未定义的属性'oneOfType' ./node_modules/react-widgets/lib/util/localizers.js /node_modules/react-widgets/lib/util/localizers.js:23

在有人问Redux-Forms是否正确设置之前,我已经将其与其他几个渲染字段一起使用,我试图添加一个日期选择器,但它只是在我身上出现了。

// RenderDateTimePicker.jsx
import React from 'react';
import PropTypes from 'prop-types';
import DateTimePicker from 'react-widgets/lib/DateTimePicker';
import moment from 'moment';
import momentLocaliser from 'react-widgets/lib/localizers/moment';
momentLocaliser(moment);

const RenderDateTimePicker = ({input: { onChange, value, name }, label, outercss, inputcss, showTime}) => {

    return (
        <div className={outercss}>
            <label htmlFor={name}>{label}</label>
            <DateTimePicker onChange={onChange}
                            className={inputcss}
                            format={{ raw: 'MM/dd/yyyy'}}
                            defaultValue={new Date()}
                            time={showTime}
                            value={!value ? null : new DateTimePicker(value)}
            />
        </div>
    )
}
export default RenderDateTimePicker


// Snippet of main compoent
import React, { Component } from 'react';
import { Field, reduxForm  } from 'redux-form';
import { connect } from 'react-redux';
import RenderTextField from '../common/RenderTextField';
import RenderDateTimeField from '../common/RenderDateTimePicker';

export class SearchBar extends Component {


    render() {
      const { handleSubmit } = this.props;

        return (
           <form onSubmit={handleSubmit}>
             <Field  name="startDt"
                     outercss="col-md-2"
                     inputcss="form-control form-control-sm"
                     label="Start Date"
                     component={RenderTextField}
            />

            <Field  name="endDt"
                    outercss="col-md-2"
                    inputcss="form-control form-control-sm"
                    label="End Date"
                    component={RenderDateTimeField}
            />

            <button className="btn btn-primary">Search</button>
      </form>


        )
    }
}
export default reduxForm({
    form: 'SerchAppDeploymentForm'
})(
        connect(mapStateToProps, mapDispatchToProps)(SearchBar)
);

0 个答案:

没有答案