从子级到父级启动函数/事件

Question

在我的父组件中，我有一个函数/事件，如下所示：

const onClick = e => {
e.preventDefault();
POST('/api', { data: data }).then(
async (response) => {
const json = await response.json()
setData(json.data)
}
)
}

在父组件上，这是由以下程序启动的：

<button type="button" onClick={onClick}>Click me</button>

然而，我也有一个子组件，我希望其中的一个点击事件也能启动此功能/事件和。这是怎么做到的？

我试着做一些类似的事情：

<ChildComponent onclick={onClick} data={data} setData={setData} />

然后在子组件中做一些类似的事情：

<div onClick={() => {props.setData(i); props.onClick;}}>

但这似乎并不奏效。

那么，有什么迹象表明我在这里做错了什么吗？

Answer 1

我不确定这是否能解决你的问题，但你似乎使用了错误的函数道具。

试试这个：

<div onClick={(e) => {props.setData(i); props.onClick(e);}}>

您可以通过两种方式使用onClick中的功能：

1-将道具功能本身分配给onClick:

<div onClick={props.onClick}>

2-为onClick分配一个回调，该回调调用带有事件的函数：

<div onClick={(e) => props.onClick(e)}>

总结一下：onClick需要接收一个函数，但你的问题是你分配了一个回调(这是正确的(，而这个回调没有调用props.onClick一个

[你在做道具.onClick而不是道具.onCClick((]

您应该更新父级中的状态，而不是子级中的。我不知道为什么在子对象中调用props.setData，而在父对象onClick函数中可以处理它。