使用Formik组件中的react-datetime保存数据时出现问题

问题描述 投票:0回答:2

我正在尝试将我的默认日期选择器更改为DateTime。我正在使用Formik,我知道这是自定义输入的问题。现在,当我保存更改表单时,正在保存,但是使用当前日期,而不是我选择的那个。任何想法如何解决这一问题?我的代码(部分使用datepicker)现在:

<Datetime
    id="dateFrom"
    name="dateFrom"
    placeholder="Enter date"
    value={this.props.dateFrom}
    onChange={this.props.onChange}
    onBlur={this.props.onBlur}
    isInvalid={!!this.props.errors.dateFrom}
    readOnly={this.props.status !== ProjectStatus.InProgress}
 />

以前的值是this.props.dateFrom,因为在编辑现有条目时会显示相同的组件。

javascript reactjs datetimepicker formik
2个回答
2
投票

我正在做研究,尝试不同的方法,并寻求其他开发人员的帮助。我提出了这个适用于我的解决方案:

<Datetime
    id="dateFrom"
    name="dateFrom"
    placeholder="Enter date"
    value={this.props.dateFrom}
    onChange={(dateFromValue) => {this.props.setFieldValue('dateFrom', this.formatDate(dateFromValue))}}
    onBlur={this.props.onBlur}
    isInvalid={!!this.props.errors.dateFrom}
    readOnly={this.props.status !== ProjectStatus.InProgress}
/>

和formatDate函数:

formatDate(momentDate) {        
    return moment(momentDate).format("YYYY-MM-DD");
}

1
投票

我在render找到了另一种解决方案

<Field
    name="time"
    render={({field,form:{isSubmitting}})=>(
        <Datetime onChange={time=>{setFieldValue('time',time.format('YYYY-MM-DD'))}}/>
    )}
/>

CodeSandbox

© www.soinside.com 2019 - 2024. All rights reserved.