Question

我有一封电子邮件输入。在该输入的onBlur事件中，我检查数据库是否存在电子邮件。

如果电子邮件存在，我将调用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;

我在做什么错？

React Formik：setFieldError和onBlur无法按预期工作

0 个答案: