React、前記コンポーネント内のレンダリング要素ではなく、コンポーネントにonClickイベントを直接追加する。

Question

最初にこのスレッドについて知りたい：React onClick event on component

これをReact Componentに直接行う方法はありませんか？それはスレッドで答えられるようには思われませんでした。私はどのように攻撃された機能をレイヤーに追加することができるのかを知っていますが、それはより脆いIMOになる余分な接続コードです。 ListItemレベルへの変更は、相​​互接続に加えなければなりません。マスター状態に戻ろうとするnThレベルの子コンポーネントであれば、これはさらに悪化すると思います。

私の場合

Parent->リスト - >のListItem

私は、リストの要素のクリックイベントが親の機能を起動しておく必要があります。私はListItemコンポーネントをクリックし、そのonClickイベントをParentに戻して、兄弟コンポーネントのリストをトリガーするように状態を更新することができるようにしたいと思います。リストには多くの定型文を削除しました。

親コンポーネントがすべてをラップします。これは、私がレンダリングビューを更新するために状態を使用しているところです。

var Parent = React.createClass({ 
    updateState:function(newCurrent){ 
     this.setState({current: newCurrent}); 
    }, 
    render: function() { 
     return (
      <div className="Parent" > 
       <Current this.state.current /> 
       <List 
       list={this.state.list} 
       updateCurrentVideo={this.updateCurrentVideo} /> 
      </div> 
     ); 
    } 
}); 

ここに一覧がリスト要素は開始時に説明し、私は状態を更新するために戻って親までそのデータを渡し、それぞれのListItem TIにonClickイベントを添付したいです。

このようなイベントをコンポネントの内側に付ける代わりに、トリガを渡す必要はありません。 ListItem-> List-> Parent（）。 Listの子を介してi.mapしながらリスナーをアタッチするといいでしょう。

var List = React.createClass({ 
    render: function() { 
     var list = this.props.list.map(function(item,index){ 
      return (
       <ListItem 
        onClick={() => this.props.updateState(item) } /> 
      ) 
     }.bind(this)); 

     return (
      <div className="List"> 
       {list} 
      </div> 
     ); 
    } 
}); 

コンポーネントレベルで添付されたonClickは、実際に何もしないようです。しかし、私はそれをこのように変更し、コールバック関数を持つListItemに小道具を渡すと、それは魔法のように動作します。だから私は私の大きな疑問に思う。

var ListVideos = React.createClass({ 
    handleClick:function(data){ 
     this.props.updateCurrentVideo(data) 
    }, 
    render: function() { 
     var list = this.props.list.map(function(item,index){ 
      return (
       <ListItem 
        handleClick={this.handleClick(item) } /> 
      ) 
     }.bind(this)); 

     return (
      <div className="List"> 
       {list} 
      </div> 
     ); 
    } 
}); 

そして私はあなたが求めているものを理解していればのListItem

var ListItem = React.createClass({ 
    render: function() { 
     return (
      <div className="ListItem" onClick={this.props.handleClick}> 
       // STUFF 
      </div> 
     ); 
    } 
}); 

Answer 1

ListItemにすべての小道具を渡し、イベントリスナーが自動的に落ちるようにすることができます。

var ListItem = React.createClass({ 
    render: function() { 
     return (
      <div className="ListItem" {...this.props}> 
       Stuff 
      </div> 
     ); 
    } 
}); 

またはes6では、使用しないものだけを渡すことができます。あなたがグローバルでを作成し、コンテキストを使用しない限り、私はまさにあなたが求めているものをフォローしませんが、私の知る限り、あなたがすべての方法ダウンの親からの関数を渡す必要が

var ListItem = React.createClass({ 
    render: function() { 
     var {text, ...props} = this.props; 
     return (
      <div className="ListItem" {...props}> 
       {text} 
      </div> 
     ); 
    } 
}); 

Answer 2

にコンポーネントラッパーにのonClickを取り付け - あなたはデイジーが親によって連鎖することなく、孫から祖父母のメソッドを呼び出すことができます？ - そう、あなたはそれを行うことができます。

あなたがListを作成するときにあなたの問題は、最初の例では、あなたがそれを存在しないupdateCurrentVideoを指してプロパティを与えるかもしれない、とあなたはListItemを作成するときに、あなたはそれを指し性を付与this.props.UpdateStateも存在しません。

あなたの他の例がうまくいかない理由を説明しているわけではありませんが、何らかのタイポグラフィ上の問題があると思います（ListとListVideosの違いは何ですか？誤って名前を付けられたハンドラは、Reactでの無言の失敗の原因となります。いずれの場合においても

、一般的な答えはこのような何かがうまくいくということです。

var Grandparent = React.createClass() { 
    handleChange: function(update) { 
     this.setState({data: update}); 
    }, 
    render: function() { 
     return (
      <Parent handleChange={this.handleChange} /> 
     ); 
    } 
} 

var Parent = React.createClass() { 
    render: function() { 
     return (
      <Child handleChange={() => this.props.handleChange(changeValue)} /> 
     ); 
    } 
} 

var Child = React.createClass() { 
    render: function() { 
     return (
      <div onClick={this.props.handleChange}>Go</div> 
     ); 
    } 
} 

また、あなたは子供でのonClickを処理する必要がある場合に匿名関数を使用せずにもっと何かバニラを行うことができますコールバックを呼び出す前に