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没有呈现，但是您可以将行<ErrorMessage name={fieldName} />替换为{formik.errors[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 function 没有什么特别之处。

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

2. 正如这个答案中提到的，我更改了您的提交按钮条件以确定该按钮是否被禁用：

<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)}
/>

方案二