reactjs - 如何将道具从孩子的孩子传递给父母
问题描述
我试图将一个函数向下传递给一个孩子,然后再向下传递给该孩子的孩子,然后将它的 id 传递给父母,但我不知道如何将 id 传递回来。我可以在不传回参数的情况下调用该函数,但我无法使用它。
这是我的父组件:
class SideBar extends Component {
constructor(props){
super(props);
this.state={
groups: [
{name: 'Test', id: 1},
],
open: false,
selectedIndex: 1
};
}
handleSelectedIndex = (id) => {
console.log('selected id: ' + id);
};
render(){
return(
<div className={classes.Groups}>
<Groups groups={this.state.groups} selected={this.state.selectedIndex} handleSelected={this.handleSelectedIndex}/>
</div>
);
}
这是第一个孩子:
const groups = (props) => (
<List component="nav" className={classes.GroupContainer}>
{
props.groups.map(group =>
<Group
name={group.name}
key={group.id}
id={group.id}
selected={props.selected}
handleSelected={props.handleSelected}/>
)
}
</List>
);
这是孩子的孩子:
const group = (props) => {
let id = props.id
return(
<>
<ListItem
button
selected={props.selected === props.id}
className={classes.Group}
onClick={props.handleSelected(id)}
>
<ListItemText
className={classes.GroupTitle}
primary={props.name}
key={props.key}/>
</ListItem>
<Divider className={classes.Divider}/>
</>
);
};
有人可以解释如何通过 id 备份吗?
解决方案
您需要在孩子的子组件中以正确的方式调用处理程序。
此行将在组件渲染时调用处理程序,而不是在 onClick 上。
onClick={props.handleSelected(id)}
相反,它应该是这样的
onClick={(e) => props.handleSelected(id)}
这将正确绑定事件侦听器。
推荐阅读
- ios - “tel://”链接在 iPhone 模拟器上不起作用
- java - 为什么 Mybatis 必须提供无参数构造方法?
- python - 获取python列表的选定元素
- antd - 搜索图标不在中心
- react-native - 仅适用于 android 的 React native throwing 406“Not Acceptable”
- android - 如何在 Jetpack Navigation 中单击按钮时从片段二返回到片段一的先前目的地
- php - MySQL LIKE 模式为超过 2 个字符长度的字符串返回空结果
- r - R中的人口金字塔图
- c# - 如何在 ASP.Net MVC 中验证上传的文件
- html - 带有 HTML 中的点赞的 Firebase