Formik组件未使用react-tabs呈现

Question

我尝试将react-tabs与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的情况下的打印屏幕：

我真的不知道我在做什么错。有人遇到过这个问题吗？ 我得到的唯一错误是来自react-tabs：

  

1.chunk.js：252727警告：道具类型失败：UncontrolledTabs中的“ Tab”和“ TabPanel”应该相等。收到2个“标签”   和0个“ TabPanel”。

Answer 1

您需要做的是将Formik和form包装成Tabs。