是否有人使用过React-loki+反应日期?

发布于 2025-01-26 11:02:52 字数 3844 浏览 3 评论 0原文

有没有人试图将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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文