Formik 组件未使用 react-tabs 呈现

Question

我正在尝试使用 react-tabs with Formik，但每次我放置 <Formik> 标签时，都不会呈现任何内容。这就是我想要做的：

    <div className={classes.root}>
      <Typography className={classes.headerText}>Editar lojista</Typography>
      <Tabs>
        <TabList>
          <Tab>Loja e responsável</Tab>
          <Tab>Segurança</Tab>
        </TabList>
        <Formik
          initialValues={this.getInitalValues()}
          onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
              // alert(JSON.stringify(values, null, 2));
              setSubmitting(false);
              console.log(values);
            }, 400);
          }}
          validationSchema={schema}>
          {({
            values,
            errors,
            touched,
            handleChange,
            handleBlur,
            handleSubmit,
            isSubmitting
            /* and other goodies */
          }) => (
            <form className={classes.form}>
              <TabPanel>
                <MainLojistaForm /> {/* this is one component */}
              </TabPanel>
              <TabPanel>
                <SegurancaForm /> {/* this is one component */}
              </TabPanel>
              <div className={classes.saveContainer}>
                <Button
                  variant="contained"
                  type="submit"
                  className={classes.button}>
                  Salvar
                </Button>
              </div>
            </form>
          )}
        </Formik>
      </Tabs>
    </div>

这是没有 Formik 的打印屏幕：

我真的不知道我做错了什么。有人遇到过这个问题吗？我得到的唯一错误来自反应标签：

1.chunk.js:252727 Warning: Failed prop type: There should be an equal number of 'Tab' and 'TabPanel' in UncontrolledTabs. Received 2 'Tab' and 0 'TabPanel'.

Answer 1

您需要做的是将 Formik 和 form 包裹起来 Tabs.

Formik 组件未使用 react-tabs 呈现

Formik component not being rendered with react-tabs

reactjs

react-tabs

formik