在React中发生错误时更改现有输入字段的样式
在React中发生错误时更改现有输入字段的样式
提问于 2020-06-07 23:05:11
在使用React库创建的React表单中，每当出现错误时，我希望将输入元素的边框颜色更改为1px实心红色。
但是，正如我们所知，无论何时ErrorMessage创建新的验证错误，react都会使用呈现一个新的错误组件，所以基本上，当错误发生时，我们如何更改我们的现有输入字段颜色？
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>;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2020-06-11 23:22:38
您可以使用react快速字段，以便通过react js表单执行验证。
Stack Overflow用户
发布于 2021-02-26 20:23:39
到目前为止，似乎还没有一种简单的方法可以做到这一点。您可以为<Field>呈现一个自定义子程序来实现这一点。示例：
<Field type="text" name="firstName">
{ ({
field,
meta: { touched, error }
}) => <input className={ touched && error ? "invalid" : "" } { ...field } />
}
</Field>然后在css中
input.invalid {
border-color: red;
}更新:这里是指向文档的链接：field输入具有FieldInputProps的形状，meta是一个FieldMetaProps
然而，应该使用一个特殊的控制库，比如React Bootstrap或Materia，它可以促进这一点--您不应该直接使用Formik。 Formik只是用于收集/提交数据，而不是用于详细的表单元素。
Stack Overflow用户
发布于 2022-10-31 09:52:12
您可以通过CSS实现所需的结果。
让我们使用以下表单字段作为示例：
<div>
<label className={"formLabel"} htmlFor="phoneNumber">
Phone number
</label>
<ErrorMessage className={"formError"} name="phoneNumber" component={'span'} />
<Field className={"formInput"} name="phoneNumber" />
</div>直到出现错误- Formik将不会呈现<ErrorMessage />组件
考虑到上面描述的行为，我们可以在<ErrorMessage />组件之前呈现一个CSS组件，并在发生错误时使用CSS类对ErrorMessage进行更改输入样式。
.formError + input {
border: 1px solid red;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62256709
复制相关文章
点击加载更多
相似问题
在发生错误时更改字段类
如何更改React电话号码输入字段的默认样式
onChange输入字段在react js编辑更新操作中不发生更改
如何在react中值发生更改时更新输入表单中的字段
在验证错误时更改输入框的格式样式
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
