React /Formik - 如何禁用 Formik 表单中第一个字段的自动对焦？答案

【问题标题】：React /Formik - How to disable autofocus from the first field in a Formik form?React /Formik - 如何禁用 Formik 表单中第一个字段的自动对焦？
【发布时间】：2022-10-18 00:43:01
【问题描述】：

我有一个使用 formik 构建的表单，它设置为模态。当我打开模式时，第一个字段始终是焦点。这是表格：

   <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
      {({  isValid}) => (
        <Form>
          <FlexRow>
            <FlexColumn className="mr-4 w-36">
              <FormikDate
                icon={<IconFa icon={calendarAlt} />}
                label={i18next.t('timeWindow.customDateLabel')}
                name="date"
                disabledDate={isDayInThePast}
                validate={(value: string) => formikIsValidYYYYMMDDDate(value, 'Date not valid')}
              />
            </FlexColumn>
            <FlexColumn className="mr-4 w-36">
              <FormikTime
                name="timeFrom"
                label={i18next.t('btimeWindow.timeFrom')}
                icon={<IconFa icon={clock} />}
                validate={(value: string) => formikValidationRequired(value, i18next.t('application.required'))}
              />
            </FlexColumn>
            <FlexColumn className="mr-4 w-36">
              <FormikTime
                type="time"
                name="timeTo"
                label={i18next.t('timeWindow.timeTo')}
                icon={<Icon icon={clock} />}
                validate={(value: string) => formikValidationRequired(value, i18next.t('application.required'))}
              />
            </FlexColumn>
          </FlexRow>
          <hr className="w-full mt-8    border-t border-gray-300 border-0 border-solid" />
          <FlexRow justifyContent="end" gap="8">
            <ButtonBase variant="secondary" onClick={toggleCustomTimeView} type="button">
              {i18next.t('button.cancel')}
            </ButtonBase>
            <ButtonBase
              variant="primary"
              type="submit"
              disabled={!isValid}
            >
              {i18next.t('timeWindow.timeSlot')}
            </ButtonBase>
          </FlexRow>
        </Form>
      )}
    </Formik>

我怎样才能避免专注于第一个领域？

因为在我的情况下，第一个字段是DatePicker，然后它会打开自己的带有日历的模式，我不希望它在不先单击该字段的情况下打开。

【问题讨论】：

我认为这不是formik问题。这个库我从来没有遇到过类似的问题。也许它是由 datePicker 组件引起的？你检查过吗？如果可能的话，帮助一些在代码沙箱上准备的基本示例会容易得多

标签： javascript reactjs formik

【解决方案1】：

我不知道...但我可以尝试提出一些尝试。

第一次尝试：tabIndex

似乎 Formik 不支持 tabIndex 属性：只需嵌套你的福米克领域在 <div> 中（没有任何边距、边框和填充）和正确的 tabIndex。

            <FlexColumn className="mr-4 w-36">
              <div tabIndex="3">
                <FormikDate
                  icon={<IconFa icon={calendarAlt} />}
                  label={i18next.t('timeWindow.customDateLabel')}
                  name="date"
                  disabledDate={isDayInThePast}
                  validate={(value: string) => ...}
                />
              </div>
            </FlexColumn>

完全避免关注某个字段的一种可能尝试是在<Formik> 内添加<div tabIndex="0">，并为所有其他字段设置tabIndex 大于0。

第二次尝试：通过代码

useEffect(() => document.activeElement.blur(), []);

【讨论】：