が反応：私が使用している親のイベントハンドラ

Question

に子供の小道具にアクセスすることができませんがUIを作成するために反応し、私は親コンポーネントと子コンポーネントを持って、これらの線に沿って何か：

// Child component 
var ListItem = React.createClass({ 
    render: function() { 
    var link_details = (
     <div> 
      Start Date: {this.props.my_data.start_date}<br/> 
      End Date: {this.props.my_data.end_date}<br/> 
     </div> 
    ); 

    return (
     <li> 
      <a onClick={this.props.clickHandler}> 
      { this.props.my_data.name } 
      </a> 
      {link_details} 
     </li> 
    ) 
    } 
}); 

// Parent component 
var Sidebar = React.createClass({ 
    getInitialState: function() { 
    return { 
     my_data: [], 
    }; 
    }, 
    handleListItemClick: function(e){ 
    console.log(e.target); 
    console.log(e.target.props); 
    }, 
    render: function() { 
    var myLinks = this.state.my_data.map(function(mylink) { 
     return (
      <ListItem key={mylink.id} my_data={mylink} clickHandler={this.handleListItemClick} /> 
     ); 
    }.bind(this)); 
    return (
    <div> 
     <ul className="nav nav-sidebar"> 
     { myLinks } 
     </ul> 
    </div>) 
    } 
}); 

を私はクリックをしたいです親のハンドラをトリガーして、親がその子でクリックされた内容に基づいて状態を更新できるようにする。上のコードが動作し、親のハンドラが呼び出されている間、子コンポーネントの小道具にアクセスすることはできません。私はそれが設計であるかどうかわからないし、別の方法で子供から親にデータを渡すか、私が何か間違っているかどうかはわかりません。私はまだReactにはとても新しいので、どんなアドバイスも感謝しています。ありがとう！

var ListItem = React.createClass({ 
    clickItem: function (e) { 
     this.props.clickHandler(e, this.props.my_data); // now you can pass any data to parent 
    }, 
    render: function() { 
    var link_details = (
     <div> 
      Start Date: {this.props.my_data.start_date}<br/> 
      End Date: {this.props.my_data.end_date}<br/> 
     </div> 
    ); 

    return (
     <li> 
      <a onClick={this.clickItem}> 
      { this.props.my_data.name } 
      </a> 
      {link_details} 
     </li> 
    ) 
    } 
}); 

Answer 1

あなたはそれを行うことはできませんが、コールバック

<li> 
    <a onClick={this.props.clickHandler.bind(null,this.props.my_data.name)}> 
    { this.props.my_data.name } 
    </a> 
    {link_details} 
</li> 

または矢印機能を使用して経由して親に子供からのデータを渡すことができますなぜnullを渡すのですか？

覚えておくべきこと： 「this」への自動バインディングメソッドは、コンポーネントがマウントされたときに発生します。

我々が直接気にすることなく、子コンポーネントに機能（例えばthis.clickHandler）を渡すと、子コンポーネント

に親コンポーネントから渡されたコールバックを1.Calling二つの条件

があります。関数が実際に呼び出されたときの値は「this」です。

は、インクルードがあなたの代わりに 『を渡す必要がありますので、（ 'この』は、既に結合値を変更しようとしているような）愚かな何かをやってからあなたを停止するのに役立つ独自の機能を備えた標準Function.prototype.bind方法が代わるリアクトnull 'と言って「これは引数を変更するだけであることを理解しています」。

2。

が反応同じコンポーネント内で定義された関数を呼び出すと機能のためにこれを行いませんが、.bindに呼び出すことにより、最初の引数を設定したい場合は、同じコンポーネント内

を結合するための

ルールを呼び出し、関数...

は、propsで渡され、最初の引数としてnullを渡します。 「この」、パス例えば「この」などの最初の引数から取ら

this.props.funcName.bind(null, "args") 

this.funcName.bind(this, "args") 

Answer 2

あなたはそうすることができます。これは、私が興味があると思いワーク・ように見えるん

// Parent component 
var Sidebar = React.createClass({ 
    getInitialState: function() { 
    return { 
     my_data: [], 
    }; 
    }, 
    handleListItemClick: function(data_passed, e){ 
    console.log(data_passed); 
    }, 
    render: function() { 
    var myLinks = this.state.my_data.map(function(mylink) { 
     return (
      <ListItem key={mylink.id} my_data={mylink} clickHandler={this.handleListItemClick.bind(null, mylink.id)} /> 
     ); 
    }.bind(this)); 
    return (
    <div> 
     <ul className="nav nav-sidebar"> 
     { myLinks } 
     </ul> 
    </div>) 
    } 
}); 

他のソリューションを見て、どれが「ベスト」なのか、なぜそれが正しいのでしょうか。あなたは

編集 ES6

<li> 
    <a onClick={() => this.props.clickHandler(this.props.my_data.name)}> 
    { this.props.my_data.name } 
    </a> 
    {link_details} 
</li> 

を使用している場合

Answer 3

私はPass props to parent component in React.jsに答えを見ていたし、次のを思い付いた：