每当 React Formik 中发生错误时，更改现有输入字段的样式

Question

在我使用 React Formik 库创建的 React Form 中，每当出现错误时，我想将输入元素边框颜色的样式更改为1px 纯红色。

但正如我们所知，react formik 每当发现新的验证错误时都会使用 ErrorMessage 渲染一个新的错误组件，所以基本上，当错误发生时，我们如何更改现有的输入字段颜色？

CSS：

.formGroup input {
  width: 100%;
  border: none;
  border-bottom: 1px solid black;
}
.formGroup input:focus {
  outline: none;
}
.formGroup button {
  background-color: antiquewhite;
  border-radius: 3px;
  border: none;
  font-size: 15px;
  padding: 10px;
}
.error {
  color: red;
  text-align: start;
  font-size: 13px;
}

代码：

import React, { Component } from "react";
import classes from "./P.module.css";
import { NavLink } from "react-router-dom";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
const initialValues = {
  company_name: "",
  company_profile: "The Opinia is news and media company",
  location: "",
  phone_number: "",
  email: "",
  gst: "",
};

const onSubmit = (values) => {
  console.log("Form Data: ", values);
};

// for validation
const validationSchema = Yup.object({
  company_name: Yup.string().required("Required"),
  company_profile: Yup.string().required("Required"),
  location: Yup.string().required("Required"),
  email: Yup.string().required("Required").email("Invalid email format"),
  phone_number: Yup.number().required("Required"),
  gst: Yup.string().required("Required"),
});
export default function Projects2(props) {
  return (
    <div className={classes.main}>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={onSubmit}
      >
        <Form className={classes.form}>
          <div className={`${classes.formGroup}`}>
            <label htmlFor="company_name">Company Name</label>
            <Field type="text" id="company_name" name="company_name" />
            <ErrorMessage name="company_name" component={TextError} />
          </div>
          <div className={classes.formGroup}>
            <label htmlFor="company_profile">Company Profile</label>
            <Field type="text" id="company_profile" name="company_profile" />
            <ErrorMessage name="company_profile" component={TextError} />
          </div>
          <div className={classes.formGroup}>
            <label htmlFor="location">Location</label>
            <Field type="text" id="location" name="location" />
            <ErrorMessage name="location" component={TextError} />
          </div>
          <div className={classes.formGroup}>
            <label htmlFor="phone_number">Phone</label>
            <Field type="number" id="phone_number" name="phone_number" />
            <ErrorMessage name="phone_number" component={TextError} />
          </div>
          <div className={classes.formGroup}>
            <label htmlFor="email">Email</label>
            <Field type="email" id="email" name="email" />
            <ErrorMessage name="email" component={TextError} />
          </div>
          <div className={classes.formGroup}>
            <label htmlFor="gst">GST Number</label>
            <Field type="text" id="gst" name="gst" />
            <ErrorMessage name="gst" component={TextError} />
          </div>

          <div className={classes.formGroup}>
            <button type="submit">Submit</button>
          </div>
        </Form>
      </Formik>
    </div>
  );
}

export function TextError(props) {
  return <div className={classes.error}>{props.children}</div>;
}

Answer 1

到目前为止，似乎没有一个简单的方法可以做到这一点。您可以渲染自定义子项来<Field>实现此目的。例子：

<Field type="text" name="firstName">
  { ({ 
       field, 
       meta: { touched, error } 
    }) => <input className={ touched && error ? "invalid" : "" } { ...field } />
  }
</Field>

然后在CSS中

input.invalid {
  border-color: red;
}

更新：这里是文档的链接：输入具有FieldInputPropsfield的形状，并且是FieldMetaPropsmeta

但是，您应该使用特殊的控制库，例如 React-Bootstrap 或 Materia-UI，这有助于实现这一点 - 您不应该为此直接使用 Formik。Formik 仅用于收集/提交数据，而不用于详细的表单元素。

Answer 2

您可以使用react formik fastfields通过react js表单执行valdiation