Показать ошибку проверки Redux-Form для встроенного компонента

Я встроил компонент 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 в emailList не пусто, я добавил пользовательское правило проверки:

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;
  };
}

Теперь, когда я отправляю форму с пустой текстовой областью EmailAddressInput, createValidator возвращает {invitees: 'Required'}. Отправка формы останавливается, как и ожидалось (ура!), но сообщение об ошибке теряется.

Ошибки добавляются как свойство errors объекта Redux-Form field, но invitees не является объектом field, поэтому я предполагаю, что по этой причине коллекция ошибок не прикрепляется.

field на самом деле является текстовой областью emailList в EmailAddressInput, но к ней не подключается коллекция ошибок, поскольку соответствующий ключ в коллекции ошибок отличается (invitees против emailList)

Любая идея, как я могу отобразить эту ошибку?


redux redux-form
person Mister Epic    schedule 03.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хитрость заключалась в том, чтобы спроецировать правильную структуру из моих функций правил проверки:

export function requiredProperty(fieldName) {
  return function (value) {
    const error = required(value[fieldName]);
    if (error) {
      return { [fieldName]: error };
    }
  };
}
person Mister Epic    schedule 03.06.2016