Javascript 反应Formik:setFieldError和onBlur未按预期工作

我有一个电子邮件输入。在输入的onBlur事件中，我检查DB是否存在电子邮件

如果电子邮件存在，我调用setFieldError将该字段标记为无效（类

无效

已设置）

到目前为止，一切都很好

但是，当我单击另一个字段或屏幕的另一部分时，

无效

类被删除，而

有效

类再次出现

显然，我需要类

无效

存在，直到在电子邮件字段中输入另一个文本。

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

字段组件：

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;

const Field=props=>{
常数{
名称
标签，
组成部分，
必修的，
自动编码，
输入大小，
大小，
hasLabel，
空标签，
formText，
formTextOnHover，
诺马金，
隐藏的，
}=道具；
返回(
{！有标签吗(
''
) : (
{label}
)}
{emptyLabel？：''}
{React.createElement（组件{
…道具，
大小：输入大小，
})}
{formText？{formText}:''}
);
};
Field.defaultProps={
标签：“”，
要求：正确，
inputSize:Sizes.REGULAR，
自动通信：是的，
尺寸：{
sm:0，
md:0，
lg:0，
xl:0，
},
hasLabel：是的，
emptyLabel:false，
formText:“”，
formTextOnHover:false，
诺玛金：错，
隐藏：假，
};
Field.propTypes={
标签：PropTypes.string，
名称：PropTypes.string.isRequired，
组件：PropTypes.func.isRequired，
必需：PropTypes.bool，
inputSize:PropTypes.one（[size.SMALL，size.REGULAR，size.LARGE]），
autocol:PropTypes.bool，
大小：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，
隐藏：PropTypes.bool，
};
导出默认字段；

我做错了什么

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;