如何将表单验证错误更改反映到 CSS 中

Question

我已经使用样式库构建了一个样式化的输入组件，如果表单字段验证失败，我很难更改组件的 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 和反应的新手，不知道如何实现它。我正在使用来自"反应最终形式"的导入 { 表单、字段 };

Answer 1

您可以将 prop validationFailed 添加到组件StyledInput。

<StyledInput validationFailed={true} placeholder={businessNamePlaceholder} required {...input} />

然后在样式组件中。

export const StyledInput = styled.input`
  border-color: ${props => props.validationFailed ? "red" : "transparent";
`;