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

Question

我正在使用 MUI React Timepicker 。 我想使用 Formik 将其与验证集成，但问题是值没有绑定(bind)到表单的初始值中。

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>;

Answer 1

您的代码几乎是正确的，但有两个问题。

1. 解构字段。
2. 有一个 open issue bug其中指出

the DateTime picker doesn't set the same type of data as in the initialValues. DateTime picker sends an object containing a property which is the date time in full string format.

添加

onChange 是为了通过重写 field 的 onChange 属性来克服该错误。
此代码与您的代码非常相似，只需应用这些修复即可。

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

    return (<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en">
            <div style={{margin: 20, padding: 20}}>
                <Formik initialValues={initialValues} onSubmit={onSubmit}>
                    {({
                          handleSubmit,values, errors, touched, handleChange, isSubmitting, setFieldValue,
                      }) => (<Form onSubmit={handleSubmit}>
                        <Field name="mondayFrom">
                            {({field}) => {
                               return (<TimePicker
                                ampm={false}
                                format="HH:mm"
                                slotProps={{
                                    textField: {
                                        label: "Monday From", size: "small", fullWidth: true,
                                    },
                                }}
                                   {...field}
                                onChange={(value)=> {
                                    setInitialValues({mondayTo: initialValues.mondayTo,mondayFrom: value.toString()})
                                }}
                            />)}
                            }
                        </Field>
                    </Form>)}
                </Formik>
            </div>
        </LocalizationProvider>);
}

更新:
正如 Profer 所指出的在注释中，onChange 的更好方法是

onChange={(value) => setFieldValue('mondayFrom', value.format("hh:mm"))}