如何在 React.js Formik (Input) 中的输入字段后设置标签？

如何解决如何在 React.js Formik (Input) 中的输入字段后设置标签？

我需要在输入字段之后为 Formik 输入组件设置标签文本。 我不确定如何定位它以及如何应用 CSS。

代码示例：

<div className="editable-job-title">
      {isEditing ? (
        <Formik
          validateOnMount={true}
          enableReinitialize
          initialValues={user}
          validationSchema={userNameValidationSchema}
          onSubmit={handleSubmit}>
          {(props) => (
            <Form>
                <Input
                name="job_title"
                type="text"
                label={t('userForm.job_title.label')}
              />
              <FormActions className="user-form-page__form-action">
                <RoundButton
                  type="button"
                  onClick={stopEditing}
                  className="button button--cancel">
                  <Icon icon={x} />
                </RoundButton>
            </Form>
          )}
        </Formik>

所以基本上，我需要职位标题文本位于字段下方。 或任何其他不错的解决方案。

解决方法

我猜您想使用 <Field> 中的 formik 元素。

如果是这种情况，请查看 https://codesandbox.io/s/formik-tests-onchange-mo4fi?file=/src/App.js

import { Field,Formik,Form } from "formik";
import { TextField } from "@material-ui/core";

<Formik
      initialValues={initialValues}
      onSubmit={() => alert("submitted!")}
    >
      <Form>
        <Field name="email">
          {(props) => (
            <>
              <TextField
                variant="outlined"
                placeholder={props.field.name}
                label={props.field.name}
                {...props.field}
              />
            </>
          )}
        </Field>
        ...