ReactJS Formik 以红色显示错误消息

Question

在 ReactJS 中，我正在开发一个 Class 组件并使用 Formik 进行验证。我能够进行验证，但错误消息显示为正常颜色（黑色）。如何在任何 HTML 元素（跨度、div 等）中添加此错误消息。

下面是验证代码

import React, { Component } from 'react'
import { useFormik } from 'formik';
import { Formik, FormikProps, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

export class SubmitCase extends Component {

    handleSubmit = (values, {
        props = this.props,
        setSubmitting
     }) => {
        setSubmitting(false);
        return;
     }    
    render() {
        const formFields = {...this.state};
        return (
            <Formik
            initialValues={{
                subject: formFields.subject
            }}
            validate={(values) => {
                let errors = {};  
                if(!values.subject)
                errors.subject = "subject Required";
                //check if my values have errors
                return errors;
                }
            }
            onSubmit={this.handleSubmit}
            render={formProps => {
                return(
                   <Form>
                      <Field type="text" placeholder="First Name" name="subject" value={formFields.subject} onChange={this.changeEventReact}/>
                      <ErrorMessage name="subject" />
                      <button type="submit">
                         Submit Form
                      </button>
                   </Form>
                );
             }}
             />);
            }
        }

我正在使用来显示消息。错误消息显示为普通文本（黑色文本）。怎么改成红色。

Answer 1

Form formik docs <ErrorMessage> 组件接受子属性作为函数 children?: ((message: string) => React.ReactNode)

所以你可以通过 return 一个包装错误消息的组件来实现你想要的

<ErrorMessage name="subject">
    { msg => <div style={{ color: 'red' }}>{msg}</div> }
</ErrorMessage>

Answer 2

您也可以制作 css 文件，例如 - ErrorMessage.css 正文：

.validation-error-message {
   color: red;
}

并制作 js 文件，例如 - validators.js 正文：

import './ErrorMessage.css';
export const ErrorMessageWrapper = (msg) => {

   return (
      <div className='validation-error-message'>
         {msg}
      </div>
   )
}

并导入和使用：

<ErrorMessage name="newPostText">
   {ErrorMessageWrapper}
</ErrorMessage>

Answer 3

您可以在 ErrorMessage 中将 component 道具与自定义类结合使用。

Formik docs

例如

<ErrorMessage component="div" name="name" className="help-block errors" />

<ErrorMessage component="div" name="email" />
// --> {touched.email && error.email ? <div>{error.email}</div> : null}

<ErrorMessage component="span" name="email" />
// --> {touched.email && error.email ? <span>{error.email}</span> : null}

<ErrorMessage component={Custom} name="email" />
// --> {touched.email && error.email ? <Custom>{error.email}</Custom> : null}

<ErrorMessage name="email" />
// This will return a string. React 16+.
// --> {touched.email && error.email ? error.email : null}

ReactJS Formik 以红色显示错误消息

ReactJS Formik display error message in Red color

validation

reactjs

formik