0

我在另一个对父级应用验证的地方嵌入了一个 React 组件：

const EmailAddressInput = (props) => {
  const { emailList, onKeyUp } = props;
  return (
      <div>
        <textarea
          {...emailList}
        />
      </div>
  );
};

它被放置在另一个组件中，例如：

let Emailer = (props) => {
  const { fields: { passType, invitees },

  return (
    <legend>Select pass type:</legend>
     { renderPassTypes(eventsState.selectedEvent.AssociatedPassTypes) }
     {passType.touched && passType.error && <span className="error">{passType.error}</span>}

     <EmailAddressInput { ...invitees } onKeyUp={ () => handleEmailToBarKeyUp(invitees.emailList.value) } />
                {invitees.touched && invitees.error && <span className="error">{invitees.error}</span> }
  )
}

现在，鉴于我想确保EmailAddressInput'semailList不为空，我添加了一个自定义验证规则：

const emailValidator = createValidator({
  invitees: [requiredProperty('emailList')],
  passType: required,
});

我的验证实用程序如下所示：

export function required(value) {
  if (isEmpty(value)) {
    return 'Required';
  }
}

export function requiredProperty(fieldName) {
  return function (value) {
    return required(value[fieldName]);
  };
}

export function createValidator(rules) {
  return (data = {}) => {
    const errors = {};
    Object.keys(rules).forEach((key) => {
      const rule = join([].concat(rules[key])); // concat enables both functions and arrays of functions
      const error = rule(data[key], data);
      if (error) {
        errors[key] = error;
      }
    });
    return errors;
  };
}

现在，当我在EmailAddressInputtextarea 为空的情况下提交表单时，createValidator 返回{invitees: 'Required'}. 表单提交按预期停止（万岁！），但错误消息丢失。

错误是作为errorsRedux-Formfield对象的属性添加的，但invitees不是field对象，所以我猜出于这个原因，错误的集合没有被附加。

这field实际上是emailListtextarea 中的EmailAddressInput，但这并没有附加错误集合，因为错误集合中的相关键不同（inviteesvs emailList）

知道如何显示该错误吗？

4

1 回答 1

1

诀窍是从我的验证规则函数中投射出正确的结构：

export function requiredProperty(fieldName) {
  return function (value) {
    const error = required(value[fieldName]);
    if (error) {
      return { [fieldName]: error };
    }
  };
}
于 2016-06-03T19:08:18.437 回答