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新手，会做出反应，不知道如何实现。我正在从'react-final-form'中使用 import {Form，Field};

Answer 1

您可以将道具validationFailed添加到StyledInput组件中。

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

然后是样式化的组件。

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

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

1 个答案: