给父组件添加点击事件，点击时获取父组件的target

**给父组件添加点击事件**

在 React 中，我们经常需要在子组件中操作父组件的状态或属性。然而，由于 JavaScript 的作用域限制，子组件无法直接访问父组件的方法或属性。为了解决这个问题，我们可以使用一个称为 "回调函数" 的技巧。

**什么是回调函数？**

回调函数是一种特殊类型的函数，它被传递给另一个函数作为参数。在我们的例子中，回调函数将用于在父组件中注册一个点击事件，当子组件被点击时，这个事件会被触发。

**如何实现？**

下面是步骤：

1. **定义一个回调函数**：首先，我们需要定义一个回调函数，它将负责在父组件中注册点击事件。这个函数应该接受一个参数，表示当前的目标（target）。

javascript// 回调函数function onParentClick(target) {
 console.log('Parent clicked:', target);
}

javascript// 父组件function Parent() {
 return (
 <div>
 <Child onParentClick={onParentClick} />
 </div>
 );
}

javascript// 子组件function Child({ onParentClick }) {
 const handleClick = () => {
 // 触发父组件的点击事件 onParentClick('Child');
 };

 return (
 <div onClick={handleClick}>
 Click me!
 </div>
 );
}

javascript// 父组件function Parent() {
 return (
 <div>
 <Child onParentClick={onParentClick} />
 <button onClick={() => console.log('Parent clicked!')}>
 Click me!
 </button>
 </div>
 );
}