在我使用React Formik库创建的React Form中,我想将输入元素的边框颜色的样式改为 1px solid red 每当有一个错误时,就会出现一个新的错误组件。
但是我们知道,react formik每当发现一个新的验证错误时,都会使用ErrorMessage渲染一个新的错误组件,所以基本上我们如何对我们的 现有输入栏 错误发生时的颜色?
.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>;
}
你可以使用react formik fastfields来通过react js表单执行valdiation。