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

Question

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

基本上，我需要职位名称文本位于该字段下方。或者任何其他好的解决方案。

Answer 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>
        ...

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

How to set label after input field in React.js Formik (Input)?

css

label

input

reactjs

formik