javascript 如何使用formik实现mui Timepicker最新6版本

ss2ws0br  于 2023-06-20  发布在  Java
关注(0)|答案(2)|浏览(101)

bounty还有2天到期。回答此问题可获得+100声望奖励。Profer正在寻找一个规范答案

我正在使用MUI React Timepicker。我想使用Formik和验证来集成它,但问题是值没有绑定在表单的initialValues中。

const [initialValues, setInitialValues] = useState({
  mondayFrom: "",
  mondayTo: "",
});
const onSubmit = async (values: RegisterFormProps) => {
  console.log({values})//here not getting mondayFrom: ""
}

    <Formik initialValues={initialValues} enableReinitialize onSubmit={onSubmit}>
  {({
    values,
    errors,
    touched,
    handleSubmit,
    handleChange,
    isSubmitting,
    setFieldValue,
  }) => (
    <Form onSubmit={handleSubmit}>
      <Field name="mondayFrom">
        {(field) => (
          <TimePicker
            {...field}
            ampm={false}
            format="HH:mm"
            slotProps={{
              textField: {
                label: "Monday From",
                size: "small",
                fullWidth: true,
              },
            }}
          />
        )}
      </Field>
    </Form>
  )}
</Formik>;
dpiehjr4

dpiehjr41#

您还应该将onChange包含到TimePicker中,因此每次更改它时,您都要设置新值以形成值:

<Formik
 initialValues={initialValues}
 enableReinitialize
 onSubmit={onSubmit} >
   {({ handleSubmit }) => (
      <Form onSubmit={handleSubmit}>
         <Field name="mondayFrom">
            {({ field, form }) => (
               <TimePicker
                  {...field}
                  ampm={false}
                  format="HH:mm"
                  slotProps={{
                    textField: {
                      label: "Monday From",
                      size: "small",
                      fullWidth: true
                    }
                  }}
                  onChange={(value) => {
                    form.setFieldValue(field.name, value);
                  }}
                />
              )}
         </Field>
      </Form>
   )}
</Formik>

下面是一个代码示例link

  • 我在这个例子中使用dayjs作为dateadapter
bpzcxfmw

bpzcxfmw2#

主旨

这里的问题是,您正在使用的组件(TimePicker)的行为与其他组件略有不同。

Formik和onChange处理程序

正如你所知道的,Formik使在react中开发表单变得更容易。它这样做,维护所有输入组件的内部状态,并通过调用onChange处理程序,每当用户在input组件中输入。
因此,通常情况下,当输入发生变化时,onChange句柄会以“synthetic event”作为参数进行调用。

onChange = (e) => setInput(e.target.value)

TimePicker和onChange处理函数

但是,对于MUI中的TimePicker组件,无论何时调用onChange处理程序,提供给处理程序的参数都不是“合成事件”,而是组件的数据值。

Object { "$L": "en", "$u": undefined, "$d": Date Tue Jun 20 2023 10:10:00 GMT+0530 (India Standard Time), "$x": {}, "$y": 2023, "$M": 5, "$D": 20, "$W": 2, "$H": 0, "$m": 10, … }

正如您所看到的,没有event.target.value,值只是event
因此,当Formik尝试访问event.target.value时,它无法访问。因此,该值不反映在组件中。

解决方案

为了避免这个问题,您需要创建自己的自定义onChange事件处理程序。你可以使用Formik中的setFieldValue来实现这一点。
这实际上会自动为您设置mondayFrom字段值。

<TimePicker
                {...field}
                ampm={false}
                format="HH:mm"
                onChange={(e) => form.setFieldValue(field.name, e)}
                slotProps={{
                  textField: {
                    label: "Monday From",
                    size: "small",
                    fullWidth: true,
                  },
                }}
              />

上面的数据对象e也有一个属性“$d”,使用它可以获得字符串格式的日期时间值:

console.log(e["$d"])
   // Date Tue Jun 20 2023 10:10:00 GMT+0530 (India Standard Time)

希望这有帮助!

相关问题