2

我有一个电子邮件输入。在该输入的 onBlur 事件中，如果电子邮件存在，我会检查 DB。

如果电子邮件存在，我调用 setFieldError 将字段标记为无效（is-invalid设置了类）

到这里，一切正常。

但是当我单击另一个字段或屏幕的另一部分时，is-invalid该类被删除，is-valid该类再次出现

显然，我需要该类is-invalid存在，直到在电子邮件字段中输入另一个文本。

我的字段组件（只是一个带有一些基本逻辑的输入，如果你需要我在下面编写实现）：

<Field
  {...this.props}
  name={`doctors.${i}.email`}
  label="Email"
  component={InputEmail}
  required={false}
  innerRef={ref =>
    this.addRef(`doctors.${i}.email`, ref)
  }
  onBlur={value =>
    this.handleEmail(
      `doctors.${i}.email`,
      value,
    )
  }
/>

处理电子邮件的回调：

handleEmail = (propertyName, value) => {
const { setFieldError } = this.props;
if (!value) {
  return;
}

Meteor.call('user.findByEmail', value, (error, user) => {
    if (user) {
      setFieldError(propertyName, 'Email is in use');
    }
  },
)};

字段组件：

const Field = props => {
  const {
    name,
    label,
    component,
    required,
    autocol,
    inputSize,
    size,
    hasLabel,
    emptyLabel,
    formText,
    formTextOnHover,
    noMargin,
    hidden,
  } = props;

  return (
    <React.Fragment>
      <FormGroup
        className={classNames({
          col: autocol,
          [`col-sm-${size.sm}`]: size.sm,
          [`col-md-${size.md}`]: size.md,
          [`col-lg-${size.lg}`]: size.lg,
          [`col-xl-${size.xl}`]: size.xl,
          'has-form-text': formTextOnHover,
          'mb-0': noMargin,
          'd-none': hidden,
        })}
      >
        {!hasLabel ? (
          ''
        ) : (
          <Label
            for={name}
            className={classNames({
              required,
            })}
          >
            {label}
          </Label>
        )}

        {emptyLabel ? <Label className="d-block">&nbsp;</Label> : ''}

        {React.createElement(component, {
          ...props,
          size: inputSize,
        })}

        {formText ? <small className="form-text">{formText}</small> : ''}
      </FormGroup>
    </React.Fragment>
  );
};

Field.defaultProps = {
  label: '',
  required: true,
  inputSize: Sizes.REGULAR,
  autocol: true,
  size: {
    sm: 0,
    md: 0,
    lg: 0,
    xl: 0,
  },
  hasLabel: true,
  emptyLabel: false,
  formText: '',
  formTextOnHover: false,
  noMargin: false,
  hidden: false,
};

Field.propTypes = {
  label: PropTypes.string,
  name: PropTypes.string.isRequired,
  component: PropTypes.func.isRequired,
  required: PropTypes.bool,
  inputSize: PropTypes.oneOf([Sizes.SMALL, Sizes.REGULAR, Sizes.LARGE]),
  autocol: PropTypes.bool,
  size: PropTypes.shape({
    sm: PropTypes.number,
    md: PropTypes.number,
    lg: PropTypes.number,
    xl: PropTypes.number,
  }),
  hasLabel: PropTypes.bool,
  emptyLabel: PropTypes.bool,
  formText: PropTypes.string,
  formTextOnHover: PropTypes.bool,
  noMargin: PropTypes.bool,
  hidden: PropTypes.bool,
};

export default Field;

我究竟做错了什么？

4

0 回答 0