reactjs - 如何在 setFieldValue 中使用 formik fieldarray 索引名称

Question

如果我有以下<TimePicker/>代码，它是 Formik FieldArray 的一部分，我如何在其中访问名称{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)
                  }
                }                  
                />            

我尝试了以下方法，但它不起作用：

formikProps.setFieldValue("{`myGroups.${index}.timeStartTime`}", new Date()) 

主要原因是我需要确保只返回用户提供的输入时间的时间部分。At the moment, when the time is selected, it is prepends the date to the time, which I don't want.

关于如何将 FieldArray 名称作为 setFieldValue 的一部分访问的任何想法？

Answer 1

您可以使用传递给字段组件 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"
            /> 

在https://formik.org/docs/api/field阅读更多内容