Reactコンポーネントをルート要素のバブリング変更イベントにリッスンさせることはできますか？

Question

私たちはフォームで検証を提供するために上位コンポーネントを使用しており、すべての変更イベントに対処する責任があります。私が抱えている問題は、onChangeハンドラをラップされたコンポーネント自体に追加することができないことにあります。そのため、HoCはdivにラップします。我々は実際にはは余分なdivに感謝しないフレックスベースのグリッドシステムを持っています。

HOCは基本的に次のようになります。

function withValidation(TargetComponent, options = {}) { 

    class ValidatingComponent extends Component { 

     ... 

     render() { 
      return (
       <div 
        ref={(_target) => { this._target = _target; }} 
        onChange={this.onChange} 
       > 
        <TargetComponent 
         {...this.props} 
         {...this.state} 
         onSubmit={this.onSubmit} 
        /> 
       </div> 
      ); 
     } 
    } 

    return ValidatingComponent; 
} 

私が試した最初のものは、単に

render() { 
    return (
     <TargetComponent 
      {...this.props} 
      {...this.state} 
      ref={(_target) => { this._target = _target; }} 
      onChange={this.onChange}   
      onSubmit={this.onSubmit} 
     /> 
    ) 
} 

ラッパーを削除しかし、それはちょうど包まコンポーネントへの小道具としてonChangeを渡すとしました私はそれを手動で呼び出す必要はありません。私は、通常のバニライベントリスナーを取り付けることを試みた。

componentDidMount() { 
    findDOMNode(this._target).addEventListener('change', this.onChange); 
} 

しかし、それはうまくいかなかった。 onChangeは決して誘発されませんでした。私は、それが何か合成的イベントを捕まえていないと推測しています。

Reactコンポーネントが自分自身で変更イベントをリッスンする方法はありますか？私は関連する<input>に到達してそこから呼び出すまで、そのコールバックをコンポーネントツリーの下に通す必要は本当にありません。

私はこの質問がthis oneに似ているように思っていますが、カスタムDOMイベントを扱っています。私はそうではありません。場合

EDIT

私はそれがhereだ、私もバイオリンを作った私がやろうとしているかについて明確にされていませんでした。 <TargetComponent />がdivでラップされていて、onChangeハンドラがそのdivに接続されている場合、フォームは機能しますが、onChangeがTargetComponent自体の小道具として渡されたばかりです。実際にイベントを聞き、関数を渡すだけではなく、私のHoCに伝えるために何らかの方法が必要です。私はここに入力をラップしていません、私はフォーム全体をラッピングしています。

Answer 1

もちろん、バブリングを使用することができます。 <TargetComponent />がコンテナとして使用するHTML要素のリスナーをonInputまたはonChangeに設定するだけです。あなたの条件に合格すれば（通常のDOM APIを使用して）イベントターゲットをチェックしてください（おそらく何らかのクラスなどが必要です）に渡したthis.props.onChange()を呼び出してください。しかし、あなたはES6がコールバックとしてfinction矢印使用していない場合は、コールバックにthisをバインドすることを忘れないでください：

<TargetComponent 
    onChange={this.onChange.bind(this)} 
/> 

Answer 2

私はそのようにあなた、formそれを自己にonChangeイベントハンドラをアタッチしても安全だと思いますそれをラップする必要はありません。 a modified version of your jsfiddle。

// ... 
render() { 
     const { 
      formData: { 
       age, 
       name, 
      }, 
      onChange 
     } = this.props; 

     return (
      <form onSubmit={this.onSubmit} noValidate={true} onChange={onChange}> 
       <div> 
        <label htmlFor="age">Age</label> 
        <input name="age" value={age} /> 
       </div> 
       <div> 
        <label htmlFor="name">Name</label> 
        <input name="name" value={name} /> 
       </div> 
      </form> 
     ); 
    } 
    // ... 

これは、それはまだあなたが今得ている同じ警告投げても期待どおりに動作します：

警告：失敗したフォームのpropTypeを：あなたはonChangeせずにフォームに フィールドをvalue小道具を提供ハンドラ。これにより、読み取り専用フィールド がレンダリングされます。フィールドを変更可能にする場合は、defaultValueを使用します。それ以外の場合は をonChangeまたはreadOnlyのいずれかに設定します。レンダリング方法が MyFormであることを確認します。