reactjs Onclick事件,将值发送给父级

Question

我对ReactJS,JavaScript和整个编码事物都很陌生.

我已经创建了一个从父组件传递给子组件的数组列表,现在我想创建一个onClick事件,每当用户单击任何该列表项时.

该值(用作键ID)将发送回父级,因此父级可以将该键值发送给另一个子级,该子级将使用基于要呈现的组件的键的条件呈现.我最好不要使用像flux这样的任何其他库.

我尽可能地陷入困境;将这个值从孩子传回父母.我认为语法有些混乱,或者我的逻辑可能不正确.我只能将它绑定到子类中的函数以检查是否正在注册该单击.

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>
   );
  }
 }

Array有这些数据

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

onClick从parent组件传递方法,如下所示:

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

在Parent中定义此函数:

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

在ChildComponent中调用此方法并将id传回parent,如下所示:

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

它会工作.

查看jsfiddle工作示例:https://jsfiddle.net/ahdqq5yy/