我使用的是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)
);