如何将道具从孩子的孩子传递给父母

Question

我正在尝试将一个函数向下传递给一个孩子，然后再向下传递给该孩子的孩子，然后将它的 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 传回来吗？

Answer 1

您需要在孩子的子组件中以正确的方式调用处理程序。

这一行将在组件被渲染而不是 onClick 时调用处理程序。

onClick={props.handleSelected(id)} 

相反，应该是这样的

onClick={(e) => props.handleSelected(id)} 

这将正确绑定事件监听器。