0

我正在使用 Material-UI Pickers，特别是<TimePicker>与 Formik 一起使用的组件。我的时间选择器字段的格式都为“HH:mm:ss”，因为我允许用户直接输入秒。

我目前的问题是，当用户按下“确定”按钮时，实际的日期值会附加到时间部分，这不是我想要的。我想针对 Formik 值存储的只是timeStartTime用户timeEndTime提供的时间分量值。

为了让我解决这个问题，我必须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", "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("timeEndTime",`${hours}:${minutes}:${seconds}`)
                  }
            }                  
          />            
        </Grid>
4

0 回答 0