是否有人使用过React-loki+反应日期?
有没有人试图将datepicker与react-loki一起使用?当我选择日期时,获取无法读取未定义的属性(读取“类型”)。
我尝试使用StartDate或Enddate的这两种方法,但会遇到同样的错误。我对此很陌生,所以我开始相信我只是不能一起使用这两个?
任何帮助将不胜感激!
const [workshopFormData, setWorkshopForm] = useState({
dateStart: new Date(),
dateEnd: new Date(),
});
const onChange = (values) => {
setWorkshopForm(values)
};
const wizardSteps = [
{
label: 'Step 0000',
component: <WizardStep0000 workshopFormData={workshopFormData} onChange={onChange} />,
},
];
return (
<div className="wizard">
<Loki
steps={wizardSteps}
onNext={onChange}
onBack={onChange}
onFinish={onFinish}
nextLabel="Next"
backLabel="Back"
noActions
/>
</div>
);
const WizardStep0000 = (props) => {
const {
values,
errors,
handleChange,
handleSubmit,
onBack,
isSubmitting,
cantBack,
backLabel,
nextLabel,
onFinish,
} = props;
useEffect(() => {
onChange();
}, [values]);
const onChange = () => {
props.onChange(values);
};
const onBackClicked = () => {
onBack(values);
};
return (
<Form onSubmit={handleSubmit} className="p-1">
<Card className="p-4 mb-4">
<div className="row">
<div className="col-lg-4">
<DatePicker
name="dateStart"
id="dateStart"
selected={values.dateStart}
onChange={handleChange}
/>
</div>
<div className="col-lg-4">
<DatePicker
name="dateEnd"
id="dateEnd"
selected={values.dateEnd}
onChange={(date) => handleChange(date)}
/>
</div>
</div>
<div className="button-group pt-3">
<button
type="button"
className="btn btn-secondary"
onClick={onBackClicked}
disabled={isSubmitting || cantBack}>
{backLabel}
</button>
<button
type="submit"
className="btn btn-primary ml-1"
disabled={
!values.dateStart ||
Boolean(errors.dateStart) ||
!values.dateEnd ||
Boolean(errors.dateEnd)
}
onClick={onFinish}>
{nextLabel}
</button>
</div>
</Card>
</Form>
);
}
WizardStep0000.propTypes = wizardProps.wizardPropTypes;
export default withFormik({
mapPropsToValues: (props) => ({
dateStart: props.workshopFormData.dateStart,
dateEnd: props.workshopFormData.dateEnd,
}),
handleSubmit: (values, { props }) => {
props.onNext(values);
},
})(WizardStep0000);
Has anyone tried to use datepicker with react-loki? Getting Cannot read properties of undefined (reading 'type') when I choose a date.
I have tried using both methods from startDate or endDate but getting same error. I am pretty new to this so I am starting to believe that maybe I just can't use these two together?
Any help would be appreciated Thanks!
const [workshopFormData, setWorkshopForm] = useState({
dateStart: new Date(),
dateEnd: new Date(),
});
const onChange = (values) => {
setWorkshopForm(values)
};
const wizardSteps = [
{
label: 'Step 0000',
component: <WizardStep0000 workshopFormData={workshopFormData} onChange={onChange} />,
},
];
return (
<div className="wizard">
<Loki
steps={wizardSteps}
onNext={onChange}
onBack={onChange}
onFinish={onFinish}
nextLabel="Next"
backLabel="Back"
noActions
/>
</div>
);
const WizardStep0000 = (props) => {
const {
values,
errors,
handleChange,
handleSubmit,
onBack,
isSubmitting,
cantBack,
backLabel,
nextLabel,
onFinish,
} = props;
useEffect(() => {
onChange();
}, [values]);
const onChange = () => {
props.onChange(values);
};
const onBackClicked = () => {
onBack(values);
};
return (
<Form onSubmit={handleSubmit} className="p-1">
<Card className="p-4 mb-4">
<div className="row">
<div className="col-lg-4">
<DatePicker
name="dateStart"
id="dateStart"
selected={values.dateStart}
onChange={handleChange}
/>
</div>
<div className="col-lg-4">
<DatePicker
name="dateEnd"
id="dateEnd"
selected={values.dateEnd}
onChange={(date) => handleChange(date)}
/>
</div>
</div>
<div className="button-group pt-3">
<button
type="button"
className="btn btn-secondary"
onClick={onBackClicked}
disabled={isSubmitting || cantBack}>
{backLabel}
</button>
<button
type="submit"
className="btn btn-primary ml-1"
disabled={
!values.dateStart ||
Boolean(errors.dateStart) ||
!values.dateEnd ||
Boolean(errors.dateEnd)
}
onClick={onFinish}>
{nextLabel}
</button>
</div>
</Card>
</Form>
);
}
WizardStep0000.propTypes = wizardProps.wizardPropTypes;
export default withFormik({
mapPropsToValues: (props) => ({
dateStart: props.workshopFormData.dateStart,
dateEnd: props.workshopFormData.dateEnd,
}),
handleSubmit: (values, { props }) => {
props.onNext(values);
},
})(WizardStep0000);
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论