Formik -自动呈现ErrorMessage

Question

我有以下代码，您可以在这里找到：

https://stackblitz.com/edit/react-d2fadr?file=src%2FApp.js

import { ErrorMessage, Field, Form, Formik } from 'formik';
import React from 'react';
import { Button } from 'react-bootstrap';
import * as Yup from 'yup';

let fieldName = 'hexColor';

const TextInput = ({ field, value, placeholder, handleChange }) => {
  value = (field && field.value) || value || '';
  placeholder = placeholder || '';
  return (
    <input
      type="text"
      placeholder={placeholder}
      onChange={(e) => handleChange(e.target.value)}
      value={value}
    />
  );
};

export default () => {
  const onSubmit = (values, { setSubmitting }) => {
    console.log(values);
    setSubmitting(false);
  };

  return (
    <Formik
      initialValues={{ [fieldName]: 'ff0000' }}
      validationSchema={Yup.object({
        hexColor: Yup.string().test(
          fieldName,
          'The Hex Color is Wrong.',
          (value) => {
            return /^[0-9a-f]{6}$/.test(value);
          }
        ),
      })}
      onSubmit={onSubmit}
      enableReinitialize
    >
      {(formik) => {
        const handleChange = (value) => {
          value = value.replace(/[^0-9a-f]/g, '');
          formik.setFieldValue(fieldName, value);
        };
        return (
          <Form>
            <div>
              <Field
                component={TextInput}
                name={fieldName}
                placeholder="Hex Color"
                handleChange={handleChange}
              />&nbsp;
              <ErrorMessage name={fieldName} />
            </div>
            <Button
              type="submit"
              disabled={!formik.isValid || formik.isSubmitting}
            >
              Submit
            </Button>
          </Form>
        );
      }}
    </Formik>
  );
};

我想知道是否有任何方式自动呈现ErrorMessage元素？

错误消息应该显示在输入文本周围的某个地方。

如果你知道怎么做的话，你可以把上面的StackBlitz和你的建议联系起来。

谢谢!

Answer 1

不知道为什么ErroMessage在提交表单之前不呈现，但是您可以用{formik.errors[fieldName]}替换行<ErrorMessage name={fieldName} />使其工作

​

import { ErrorMessage, Field, Form, Formik } from 'formik';
import React from 'react';
import { Button } from 'react-bootstrap';
import * as Yup from 'yup';

let fieldName = 'hexColor';

const TextInput = ({ field, value, placeholder, handleChange }) => {
  value = (field && field.value) || value || '';
  placeholder = placeholder || '';
  return (
    <input
      type="text"
      placeholder={placeholder}
      onChange={(e) => handleChange(e.target.value)}
      value={value}
    />
  );
};

export default () => {
  const onSubmit = (values, { setSubmitting }) => {
    console.log(values);
    setSubmitting(false);
  };

  return (
    <Formik
      initialValues={{ [fieldName]: 'ff0000' }}
      validationSchema={Yup.object({
        hexColor: Yup.string().test(
          fieldName,
          'The Hex Color is Wrong.',
          (value) => {
            return /^[0-9a-f]{6}$/.test(value);
          }
        ),
      })}
      onSubmit={onSubmit}
      enableReinitialize
    >
      {(formik) => {
        const handleChange = (value) => {
          value = value.replace(/[^0-9a-f]/g, '');
          formik.setFieldValue(fieldName, value);
        };
        return (
          <Form>
            <div>
              <Field
                component={TextInput}
                name={fieldName}
                placeholder="Hex Color"
                handleChange={handleChange}
              />&nbsp;
              {formik.errors[fieldName]}
            </div>
            <Button
              type="submit"
              disabled={!formik.isValid || formik.isSubmitting}
            >
              Submit
            </Button>
          </Form>
        );
      }}
    </Formik>
  );
};

​

Answer 2

问题是验证架构。当我换了6个

 return /^[0-9a-f]{6}$/.test(value);

至3

 return /^[0-9a-f]{3}$/.test(value);

并以初始值提交，则呈现ErrorMessage组件。

​

​

Answer 3

为了达到您的目标，我更改了您的代码如下：

1. 因为Formik的默认组件是Input，所以我删除了您的TextInput组件，因为您的组件和handleChange函数没有什么特殊之处。

<Field name="hexColor" placeholder="Hex Color" onChange={(e) => handleChange(e.target.value)}/>
<ErrorMessage name="hexColor" />

1. 正如在此回答中所提到的，我更改了提交按钮的条件，以确定是否禁用该按钮：

<Button type="submit" disabled={Object.keys(errors).length}>
  Submit
</Button>

您可以查看我的整个解决方案这里。

编辑

如果您想保留组件，您应该传递props，因为您可能缺少一些重要的东西，例如onChange、onBlur等等。

const TextInput = ({ field, ...props }) => {
  return (
    <input
      {...field} {...props}
      // ... your custom things
    />
  );
};

<Field
  component={TextInput}
  name={fieldName}
  placeholder="Hex Color"
  onChange={(e) => handleChange(e.target.value)}
/>

解决方案2