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ここで、が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-Formfieldオブジェクトのプロパティとして追加されますがinvitees、オブジェクトではないfieldため、エラーのコレクションが添付されていないと思います。

はfield実際には のemailListテキストエリアですが、エラー コレクション内の関連するキーが異なるため ( vs ) EmailAddressInput、エラー コレクションが添付されていません。inviteesemailList

そのエラーを表示する方法はありますか?

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 に答える