在哪里声明child中的处理程序函数以获取单击的项详细信息

Question

我想要父categoryHandler函数中的类别详细信息来自子组件。我不知道该放在哪里props.categoryHandler函数，以便在单击时，我应该将详细信息发送到父类别Handler作用

父组件：

const categoryHandler = (catg) => {
console.log(catg);
}
<div className="categoryBox">
<Category categories={categories} categoryHandler={() => categoryHandler} />
</div>

子组件：

export default function Category({ categories }) {
if (categories.length) {
const menu = recursiveMenu(categories);
return menu.map((item, key) => <MenuItem key={key} item={item} />);
} else {
return <div>No Menus</div>
}
}
const MenuItem = ({ item }) => {
const Component = hasChildren(item) ? MultiLevel : SingleLevel;
return <Component item={item} />;
};
const SingleLevel = ({ item }) => {
return (
<ListItem button>
<ListItemText className="category-link child" primary={item.title} />
</ListItem>
);
};
const MultiLevel = ({ item }) => {
const { items: children } = item;
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen((prev) => !prev);
};
return (
<React.Fragment>
<ListItem button onClick={handleClick}>
<ListItemText className="category-link parent" primary={item.title} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{children.map((child, key) => (
<MenuItem key={key} item={child} />
))}
</List>
</Collapse>
</React.Fragment>
);
};

Answer 1

您在代码中的方法是正确的，只需修改两件事即可实现您的期望。

1. 在父组件中，您必须修改将函数作为道具传递，如下所示：

   categoryHandler＝｛categoryHandler｝

2. 在子组件中，您必须在销毁道具的同时捕获函数，并以单个项作为函数参数调用这两个列表项：

• 在props解构中添加函数，并将该函数作为另一个props传递给MenuItem

export default function Category({ categories, categoryHandler }) {
if (categories.length) {
const menu = recursiveMenu(categories);
return menu.map((item, key) => <MenuItem categoryHandler={categoryHandler} key={key} item={item} />);
} else {
return <div>No Menus</div>
}
}

• 现在再次将函数props传递到Single And MultiLevel List，并在两个位置调用函数：

const MenuItem = ({ item, categoryHandler }) => {
const Component = hasChildren(item) ? MultiLevel : SingleLevel;
return <Component item={item} categoryHandler={categoryHandler} />;
};

const SingleLevel = ({ item, categoryHandler }) => {
return (
<ListItem button onClick={handleClick}>
<ListItemText className="category-link child" primary={item.title} />
</ListItem>
);
};
const MultiLevel = ({ item, categoryHandler}) => {
const { items: children } = item;
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen((prev) => !prev);
};
return (
<React.Fragment>
<ListItem button onClick={handleClick}>
<ListItemText className="category-link parent" primary={item.title} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{children.map((child, key) => (
<MenuItem key={key} item={child} />
))}
</List>
</Collapse>
</React.Fragment>
);
};

这个解决方案应该很好用！

Answer 2

当您调用作为道具传递的函数时，您可以将数据从子组件传递到父组件。

父组件：

const categoryHandler = (catg) => {
console.log(catg);
}
<div className="categoryBox">
<Category categories={categories} categoryHandler={categoryHandler} />
</div>

子组件：

export default function Category(props) {
props.categoryHandler(data);
}

Answer 3

您可能需要将参数传递给父组件中的函数，如下所示：

<Category categories={categories} categoryHandler={categoryHandler} />

您需要将道具categoryHandler一直传递到SingleLevel，如下所示：

categoryHandler={categoryHandler}

您可能需要使用item参数将onClick添加到SingleLevel组件中的ListItem中，如下所示：

<ListItem button onClick={() => categoryHandler(item)}>

你可以看看这个沙箱，看看这个解决方案的实际工作示例。