reactjs Onclickイベント、親に値を送る

Question

非常に新しいreactjs、javascript、およびコーディング全体に新しい。 親コンポーネントから子に渡されている配列のリストを作成しました。これで、ユーザーがそのlistItemのいずれかをクリックするたびに（キーIDとして使用される）値が親に返されるonclickイベントを作成します。 、親はそのキー値を別の子に送ることができ、それはレンダリングするコンポーネントにそのキーに基づいて条件付きレンダリングを使用します。私は好ましくは、流行のような他のライブラリを使用したくない、またはatmはUIを練習したいだけです。

私は子供から背中にその値を渡すことはできません。私が思う、あるいは私の論理が正しくない文法については混乱があります。私は子クラス内の関数にバインドして、クリックが登録されているかどうかを確認することしかできませんでした。

class Parent extends React.Component { 
render() { 
var rows = []; 
this.props.listlinkarray.forEach(function(linklist) { 
rows.push(<Child linklist={linklist} key={linklist.key} />); 
}); 
return (
<div> 
<h3> ListHead </h3> 
{rows} 

</div> 

); 
}} 

class Child extends React.Component { 
// was checking how the Onclick event works // 
getComponent(data,event) {  
    console.log('li item clicked!'); 
    console.log(data); 
    event.currentTarget.style.backgroundColor = '#ccc'; 
} 
render() { 
return (
<div> 
    <ul><li onClick={this.getComponent.bind(this,this.props.linklist.key)}> 

</div> 
    ); 
    } 
} 

アレイは、私はそれはそれが得るその値に基づいてレンダリングすることができるように親がこのクラスのクリックに基づいて、子から取得した値を渡したい、このデータをしてい

var ListNameAndLinks= [ 
{ name:'ABC', key:1} , 
{ name:'BCD', key:2} 
]; 

。

class Check extends React.Component { 
render() { 
    var i = 1 
// i want that value from parent to this component in if condition 
    if (i=1) { 
    return <UIone />; 
} 
return <UItwo />; 
} 
} 

Answer 1

このように、parent成分からonClick方法を渡し：

this.props.listlinkarray.forEach((linklist)=>{ 
    rows.push(<Child linklist={linklist} key={linklist.key} onClick={this.onClick.bind(this)}/>); 
}); 

親にこの関数を定義：コンポーネントは、このメソッドを呼び出して、バックにIDを渡す

onClick(key){ 
    console.log(key); 
} 

Childでparent、このように：

getComponent(key) { 
    this.props.onClick(key); 
} 

これは機能します。

取り組ん例えばjsfiddleを確認してください：この上https://jsfiddle.net/ahdqq5yy/