如果我有以下 <TimePicker/>
代码,它是 Formik FieldArray 的一部分,我如何在 {{1} 中访问名称 {
timeWindowGroups.${index}.timeWindowAdhocStartTime}
}} ?
setFieldValue()
我尝试了以下方法,但没有用:
<Field
component={TimePicker}
name={`myGroups.${index}.timeStartTime`}
label="Start Time"
variant= "dialog"
inputVariant="outlined"
ampm={false}
openTo="hours"
views={["hours", "minutes", "seconds"]}
format="HH:mm:ss"
value={timeWindowAdhocStartTime}
onChange={(val)=> {
const hours = new Date(val).getHours();
const minutes = new Date(val).getMinutes();
const seconds = new Date(val).getSeconds();
formikProps.setFieldValue("{`myGroups.${index}.timeStartTime`}",`${hours}:${(minutes<10?'0':'')}${minutes}:${(seconds<10?'0':'')}${seconds}`)
setStartTime(val)
}
}
/>
主要原因是我需要确保只返回用户提供的输入时间的时间部分。 At the moment, when the time is selected, it is prepends the date to the time, which I don't want.
关于如何访问作为 setFieldValue 一部分的 FieldArray 名称的任何想法?
答案 0 :(得分:0)
您可以使用传递给字段组件 FormikTimePicker 的字段属性。它包含字段的 onChange、onBlur、名称和值。
const FormikTimePicker = ({ field, ...otherProps }) => {
const handleChange = (val) => {
const hours = new Date(val).getHours();
const minutes = new Date(val).getMinutes();
const seconds = new Date(val).getSeconds();
field.onChange(`${hours}:${(minutes<10?'0':'')}${minutes}:${(seconds<10?'0':'')}${seconds}`)
};
return (
<TimePicker
{...field}
onChange={handleChange}
// pass down other props needed
/>
);
};
<Field
component={FormikTimePicker}
name={`myGroups.${index}.timeStartTime`}
label="Start Time"
variant= "dialog"
inputVariant="outlined"
ampm={false}
openTo="hours"
views={["hours", "minutes", "seconds"]}
format="HH:mm:ss"
/>