reactjs - Formik Material UI 键盘日期选择器不格式化文本输入

Question

我正在尝试创建要在 Formik 表单中使用的 DatePicker 组件。

传递给该字段的初始值是日期，但是在用户键入或从选取器中选择日期之前，我不想显示任何值。

我怎样才能做到这一点？

零件：

import React from 'react';
import { Field, useField } from 'formik';
import { KeyboardDatePicker } from 'formik-material-ui-pickers';
import { Grid }  from '@material-ui/core';

export interface DatePickerInputProps {
    sm: any,
    name: string,
    label: string,
    required?: boolean,
    disabled?: boolean,     
    disableFuture?: boolean,
    disablePast?: boolean,
    minDate?: Date,
    maxDate?: Date
}

export default function DatePickerInput( props: DatePickerInputProps ) {  
    const [ field, meta, helpers ] = useField(props.name);
    const errorText = meta.error;
    const showErrorText = !!meta.value ? !!meta.touched && !!errorText : !!errorText;
    
    return (
        <Grid item sm={props.sm || 12}>            
            <Field
                autoOk                                                              
                component={KeyboardDatePicker}                              
                name={props.name}
                label={props.label}
                disabled={props.disabled}
                required={props.required}
                error={showErrorText}
                helperText={showErrorText ? errorText : null}   
                fullWidth
                format='MM/dd/yyyy'                
                inputVariant='filled'               
                InputLabelProps={{
                    shrink: true
                }}                                          
                disableFuture={props.disableFuture}
                disablePast={props.disablePast}
                minDate={props.minDate}
                maxDate={props.maxDate}             
            />                                  
        </Grid>
    )
}

表格示例：

...

<Formik
    initialValues={{ date: new Date() }}
>
    {({ values, errors }) => {
        return (
            <Form>
                <DatePickerInput
                    sm={6}
                    name={date}
                    label={'date'}
                />
            </Form>
        )
    }}
</Formik>

Answer 1

基本上，当您在 Formik 中定义 initialValues 时，您可以将其设置为 date:null，它应该可以工作。

<Formik
    initialValues={{ date: null}}
>

休息应该可以正常工作。