reactjs - ReactJS Formik 以红色显示错误消息
问题描述
在 ReactJS 中,我正在开发一个 Class 组件并使用 Formik 进行验证。我可以进行验证,但错误消息显示为正常颜色(黑色)。如何在任何 HTML 元素(span、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>
);
}}
/>);
}
}
我用来显示消息。错误消息显示为普通文本(黑色文本)。如何将其更改为红色。
解决方案
表单 formik docs <ErrorMessage>
组件接受 children 道具作为函数children?: ((message: string) => React.ReactNode)
所以你可以通过返回一个包含这样的错误消息的组件来实现你想要的
<ErrorMessage name="subject">
{ msg => <div style={{ color: 'red' }}>{msg}</div> }
</ErrorMessage>