微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

与 Formik 一起设置材料时间选择器组件的字段值

如何解决与 Formik 一起设置材料时间选择器组件的字段值

我正在使用 Material-UI Pickers,特别是 <TimePicker> 组件和 Formik。我的时间选择器字段都采用“HH:mm:ss”格式,因为我允许用户输入精确到秒。

我目前的问题是,当用户按下“确定”按钮时,实际日期值会附加到时间组件中,这不是我想要的。我想针对 timeStartTimetimeEndTime 的 Formik 值存储的只是用户提供的时间组件值。

为了解决这个问题,我必须在我的 onChange

中包含以下 <TimePicker> 代码

现在的问题是,屏幕上显示的值没有反映我使用 onChange

设置的 formikProps.setFieldValue

此外,我的表单中还有多个时间选择器字段,如下所示,并且不想设置多个 useState 挂钩来反映值

如何更新 value={???} 以反映我的 onChange 的最新值?

const formikProps = useFormikContext()  

      <Grid item xs={3}>
          <Field 
            component={TimePicker} 
            name="timeStartTime" 
            label="Time Start Time" 
            variant= "dialog"
            inputvariant="outlined"
            ampm={false}
            openTo="hours"
            views={["hours","minutes","seconds"]}
            format="HH:mm:ss"
            value={???}
            onChange={(val)=> {
                    const hours = new Date(val).getHours();
                    const minutes = new Date(val).getMinutes();
                    const seconds = new Date(val).getSeconds();
                    formikProps.setFieldValue("timeStartTime",`${hours}:${minutes}:${seconds}`)
                  }
            }                  
          />            
        </Grid>

      <Grid item xs={3}>
          <Field 
            component={TimePicker} 
            name="timeEndTime" 
            label="Time End Time" 
            variant= "dialog"
            inputvariant="outlined"
            ampm={false}
            openTo="hours"
            views={["hours","seconds"]}
            format="HH:mm:ss"
            value={???}
            onChange={(val)=> {
                    const hours = new Date(val).getHours();
                    const minutes = new Date(val).getMinutes();
                    const seconds = new Date(val).getSeconds();
                    formikProps.setFieldValue("timeEndTime",`${hours}:${minutes}:${seconds}`)
                  }
            }                  
          />            
        </Grid>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。