如何将表单验证错误更改反映到 CSS?
How to reflect form validation error changes to CSS?
我已经使用样式库构建了一个样式化的输入组件,如果表单字段验证失败,我很难更改组件的 CSS。
<Form onSubmit={onSubmit}>
{({ handleSubmit, submitting, submitFailed, hasValidationErrors, form }) => (
<form
onSubmit={(e) => {
this.setState({ submitSucceeded: false });
handleSubmit(e).then((err) => {
if (err) {
if (onSubmitError) {
onSubmitError(err[FORM_ERROR]);
}
return;
}
form.reset();
this.setState({ submitSucceeded: true });
if (onSubmitSuccess) {
onSubmitSuccess();
}
});
}}
>
<Grid container justify="center" spacing={1}>
<Grid item xs={12}>
<Field name="businessName" validate={composeValidators(requiredValidator)}>
{({ input, meta }) => (
<Fragment>
<StyledInput placeholder={businessNamePlaceholder} required {...input} />
<StyledFieldError meta={meta} />
</Fragment>
)}
</Field>
</Grid>
我打算做的是将样式组件 StyledInput 边框更改为红色,以防表单验证失败。
CSS 看起来像:
import styled from 'styled-components';
export const StyledInput = styled.input`
width: 100%;
padding: 8px;
background-color: #ffffff;
box-shadow: inset 0 1px 2px 0 rgba(201, 202, 200, 0.5);
border-color: ##Dynamic value based on form input validation##;
`;
我查看了样式组件,它为我提供了一种传递道具的方法。我觉得我应该使用它,但我是 javascript 的新手并且会做出反应并且不知道如何实现它。我正在使用 import { Form, Field } from 'react-final-form';
您可以将道具 validationFailed
添加到 StyledInput
组件。
<StyledInput validationFailed={true} placeholder={businessNamePlaceholder} required {...input} />
然后在样式组件中。
export const StyledInput = styled.input`
border-color: ${props => props.validationFailed ? "red" : "transparent";
`;
我已经使用样式库构建了一个样式化的输入组件,如果表单字段验证失败,我很难更改组件的 CSS。
<Form onSubmit={onSubmit}>
{({ handleSubmit, submitting, submitFailed, hasValidationErrors, form }) => (
<form
onSubmit={(e) => {
this.setState({ submitSucceeded: false });
handleSubmit(e).then((err) => {
if (err) {
if (onSubmitError) {
onSubmitError(err[FORM_ERROR]);
}
return;
}
form.reset();
this.setState({ submitSucceeded: true });
if (onSubmitSuccess) {
onSubmitSuccess();
}
});
}}
>
<Grid container justify="center" spacing={1}>
<Grid item xs={12}>
<Field name="businessName" validate={composeValidators(requiredValidator)}>
{({ input, meta }) => (
<Fragment>
<StyledInput placeholder={businessNamePlaceholder} required {...input} />
<StyledFieldError meta={meta} />
</Fragment>
)}
</Field>
</Grid>
我打算做的是将样式组件 StyledInput 边框更改为红色,以防表单验证失败。
CSS 看起来像:
import styled from 'styled-components';
export const StyledInput = styled.input`
width: 100%;
padding: 8px;
background-color: #ffffff;
box-shadow: inset 0 1px 2px 0 rgba(201, 202, 200, 0.5);
border-color: ##Dynamic value based on form input validation##;
`;
我查看了样式组件,它为我提供了一种传递道具的方法。我觉得我应该使用它,但我是 javascript 的新手并且会做出反应并且不知道如何实现它。我正在使用 import { Form, Field } from 'react-final-form';
您可以将道具 validationFailed
添加到 StyledInput
组件。
<StyledInput validationFailed={true} placeholder={businessNamePlaceholder} required {...input} />
然后在样式组件中。
export const StyledInput = styled.input`
border-color: ${props => props.validationFailed ? "red" : "transparent";
`;