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

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

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

1 个答案: