トラックイベント

Question

はそれに応じて

1. フォームは、イベントを提出 - フォームの送信が成功した場合、私は成功イベント​​をブロードキャストして提出する必要がありますデータを第三者のサービスに転送します。そうでない場合は、エラーが発生した場所とともに、失敗したイベント、つまりName submission failedをブロードキャストする必要があります。

2. ページ訪問/ルート変更 - 自己説明

3. Clickイベントは - リスト項目をクリックし、ボタンのクリックに由来することができます。リストアイテムの場合はアイテムの詳細を渡す必要があり、ボタンの場合は名前だけかもしれません

4. 検索 - キーワードを送信するイベントを発生させる検索が必要です。

私はReact-0.13とRefluxストアを使用しています。

グローバルレベルでイベントを処理するために、各ボタンのクリック/サブミットイベント/検索などでコードを記述することなく、どのようにそれにアプローチできますか？

最良のアプローチは何ですか？ Bodyハンドラでは十分ではありません。このレベルのカスタマイズが必要です。

P.S - 私が放送すると、代わりに第三者の関数呼び出しがあるとします。

Answer 1

は純粋な方法で反応：

は、拡張イベント処理メソッドを持つハンドルイベントグローバルに基本コンポーネントを作成します。また

const MyForm = ({ onSubmit, children, ...props }) => (
    <form {...props} onSubmit={evt => { 
    // do global handling 
    onSubmit(evt); 
    }}> 
    {children} 
    </form> 
); 

//use case 
const CustomForm =() => (
    <MyForm onSubmit={evt => /* custom handling */}> 
    {/* CustomForm inputs and such */} 
    </MyForm> 
) 

を、あなたはHOCのアプローチを取り、各ハンドラをラップすることができ、次のものが必要です。

const MyFormHOC = FormComponent => { 
    return class extends React.Component { 
    render() { 
     const { onSubmit, ...props } = this.props; 
     return (
     <FormComponent {...props} onSubmit={evt => { 
      // do global handling 
      onSubmit(evt); 
     }}/> 
    } 
    } 
}; 

//use case 
let CustomForm = ({ onSubmit, ...props }) => (
    <form onSubmit={evt => onSubmit(evt)}> 
    {/* CustomForm inputs and such */} 
    </form> 
); 
CustomForm = MyForm(CustomForm); 

HOCアプローチの欠点は、コンポーネントがイベントハンドラに沿って最終的に呼び出すDOM要素に渡す必要があることです。

さらに一歩進んで、すべてのグローバルイベントを処理し、必要に応じて他のコンポーネントで使用する単一の基本コンポーネントまたはHOCを作成することができます。ただし、どのコンポーネントがどのコンポーネントでサポートされているかを知る必要があります（たとえばonSubmitはform以外のものには属しません）。