当反应日期时间输入为只读时如何防止日历打开

Question

我在表单中使用 react-datetime 模块和 formik。

import React, { useImperativeHandle, useReducer, forwardRef } from 'react';
import PropTypes from 'prop-types';
import { Form} from "react-bootstrap";

import "react-datetime/css/react-datetime.css";

import { useFormik} from 'formik';
import * as yup from "yup";
import Datetime from 'react-datetime';
import moment from 'moment';
import { reducer } from '../common/reducer'


// Restrict future dates when entering "Date of Birth"
const validDOB = function( current ){
    return current.isBefore(moment());
};

// Initial states of WorkloadForm
const initialState = {
    doesExist: false
};

const WorkloadForm = forwardRef((props, ref) => {
    // State Handling
    const [state, dispatch] = useReducer(reducer, initialState);

    
    // Initial Values for the WorkfloadForm
    const initialValues = {
        patDOB: '',
    }

    // Validation schema for form fields
    const validationSchema = yup.object().shape({
        patDOB: yup.string()
                        .test('invalid-dob', 'Please enter a valid DOB.', value => {
                            const dob = moment(value, 'DD-MM-YYYY', true);
                            return dob.isValid();
                        }),
    });

    // Form Submission Action
    const handleSubmit = (values, actions) =>{
        
    }

    // Formik initialization of 'useFormik'
    const formik = useFormik({
        initialValues: initialValues,
        onSubmit: handleSubmit,
        validationSchema: validationSchema
    });

    // 'useImperativeHandle' to call formik actions from parent component
    useImperativeHandle(ref, () => ({
        ...formik
    }), []);

    return (
        <>
            <Form noValidate onSubmit={formik.handleSubmit}>
                <Form.Group controlId="patDOB">
                    <Form.Label>Date of Birth</Form.Label>
                    <Datetime
                        inputProps={{
                            placeholder: 'DD-MM-YYYY',
                            id: 'patDOB',
                            name: 'patDOB',
                            readOnly: state.doesExist ? true: false,
                            className: formik.errors.patDOB && formik.touched.patDOB ? "form-control is-invalid": "form-control"
                        }}
                        closeOnSelect={true}
                        dateFormat="DD-MM-YYYY"
                        timeFormat={false}
                        value={formik.values.patDOB}
                        isValidDate={validDOB}
                        onChange={(dateFromValue) => {
                            formik.setFieldValue('patDOB', moment(dateFromValue).format('DD-MM-YYYY'));
                            }
                        }
                        renderInput={(props) => {
                            return <input {...props} value={(formik.values.patDOB) ? props.value : ''} />
                        }}
                    />
                    {formik.errors.patDOB && formik.touched.patDOB ? (
                            <div className="text-danger" style={{fontSize: '0.875em'}}>{formik.errors.patDOB}</div>
                    ) : null}
                </Form.Group>
            </Form>
        </>
    );
})

WorkloadForm.propTypes = {
    api: PropTypes.object.isRequired
};

export default WorkloadForm;

readOnly 属性工作正常，它是有条件的。

我的问题是当我触摸该字段时我仍然可以打开日历或选择器，即使它是只读的。

如何防止字段在只读时打开 picker/calendar？

谢谢

Answer 1

您可以将 open 属性传递给 false

<Datetime open={false} />

或者在您的情况下，如果条件是 state.doesExist，您可以使用状态值

<Datetime open={!state.doesExist} />

或者如果你想在你的状态为真时保持默认行为，也许你可以尝试

<Datetime open={state.doesExist ? false : null} />

编辑：

出于某种原因，明确设置 open 道具的 null 默认值不起作用，我发现该解决方法非常丑陋但有效...

<Datetime 
//...props
{...Object.assign({}, state.doesExist ? {open:false} : {})}
 />

当反应日期时间输入为只读时如何防止日历打开

How to prevent the calendar from opening when react-datetime input is readOnly

javascript

reactjs

react-datetime