如何在 React.js Formik（输入）中的输入字段后设置标签？答案

【问题标题】：How to set label after input field in React.js Formik (Input)?如何在 React.js Formik（输入）中的输入字段后设置标签？
【发布时间】：2021-02-10 22:09:56
【问题描述】：

我需要在输入字段之后为 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>

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

【问题讨论】：

标签： css reactjs input label formik

【解决方案1】：

我猜你想使用来自formik 的<Field> 元素。

如果是这种情况，请查看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>
        ...

【讨论】：