reactjs - 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 警告：失败的道具类型：应该有相同数量的“Tab”和“TabPanel” UncontrolledTabs。收到 2 个“Tab”和 0 个“TabPanel”。

Answer 1

你需要做的是 putFormik和formwrapping Tabs。