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>;
2条答案
按热度按时间dpiehjr41#
您还应该将
onChange
包含到TimePicker
中,因此每次更改它时,您都要设置新值以形成值:下面是一个代码示例link。
dayjs
作为dateadapter
。bpzcxfmw2#
主旨
这里的问题是,您正在使用的组件(
TimePicker
)的行为与其他组件略有不同。Formik和onChange处理程序
正如你所知道的,Formik使在react中开发表单变得更容易。它这样做,维护所有输入组件的内部状态,并通过调用
onChange
处理程序,每当用户在input
组件中输入。因此,通常情况下,当输入发生变化时,
onChange
句柄会以“synthetic event”作为参数进行调用。TimePicker和onChange处理函数
但是,对于MUI中的
TimePicker
组件,无论何时调用onChange
处理程序,提供给处理程序的参数都不是“合成事件”,而是组件的数据值。正如您所看到的,没有
event.target.value
,值只是event
。因此,当Formik尝试访问
event.target.value
时,它无法访问。因此,该值不反映在组件中。解决方案
为了避免这个问题,您需要创建自己的自定义
onChange
事件处理程序。你可以使用Formik中的setFieldValue来实现这一点。这实际上会自动为您设置
mondayFrom
字段值。上面的数据对象
e
也有一个属性“$d”,使用它可以获得字符串格式的日期时间值:希望这有帮助!