0

我正在使用 redux-forms，他们的示例有一个来自 react-widgets 的日期时间选择器。 Redux-Form react-widgets 示例

在此页面上的示例中，它有一个指向 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)
);
4

0 回答 0