Question

我已经在另一个内部嵌入了一个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的{{1}}不为空，我添加了自定义验证规则：

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; }; } textarea为空，EmailAddressInput会返回createValidator。表单提交按预期停止（万岁！）但错误消息丢失。

错误被添加为Redux-Form {invitees: 'Required'}对象的errors属性，但field不是invitees对象，所以我想因为这个原因没有附上错误的集合。

field实际上是field中的emailList textarea，但由于错误集合中的相关键不同（EmailAddressInput，因此未附加错误集合} vs invitees）

知道如何显示错误吗？

Answer 1

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

export function requiredProperty(fieldName) {
  return function (value) {
    const error = required(value[fieldName]);
    if (error) {
      return { [fieldName]: error };
    }
  };
}

显示嵌入式组件的Redux-Form验证错误

1 个答案: