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

在Child组件中调用此方法并将ID传回parent，如下所示：

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

它会起作用。

检查jsfiddle是否有工作示例：https://jsfiddle.net/ahdqq5yy/

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

1 个答案: