如何判断Book组件中select onChange事件来自哪个父组件？

嘿，我来帮你搞定这个问题！要判断onShelfChange事件到底来自哪个父组件，有几个实用的方案，结合你的代码场景给你拆解下：

1. 通过Props传递父组件标识（最推荐） #

这是最符合React数据流理念的方式——父组件在渲染Book组件时，主动传一个唯一标识过来，比如parentType或者parentId。

比如父组件A（比如“我的书架”列表）渲染Book时：

<Book value={currentBook.shelf} parentType="MyBookshelf" />

父组件B（比如搜索结果列表）渲染时：

<Book value={searchedBook.shelf} parentType="SearchResults" />

然后在Book组件的onShelfChange里直接读取这个props就行：

onShelfChange(e) {
  let newShelf = e.target.value;
  // 保留你原本的shelf名称转换逻辑
  if(newShelf === "Want to Read"){
    newShelf = "wantToRead";
  } else if(newShelf === "Currently Reading"){
    newShelf = "currentlyReading";
  } else if(newShelf === "Read"){
    newShelf = "read";
  }
  // 获取父组件标识
  const parentSource = this.props.parentType;
  console.log("这个事件来自:", parentSource);
  // 接下来就可以根据parentSource做不同的逻辑处理啦
}

这个方法的好处是清晰、可靠，完全不依赖DOM结构，后续代码维护起来也省心。

2. 通过事件对象追溯DOM结构（应急方案） #

如果你不想额外加props，也可以通过事件对象的DOM路径往上找——给父组件的根容器加一个data-*自定义属性，比如data-parent="my-bookshelf"。

然后在onShelfChange里遍历DOM树找这个属性：

onShelfChange(e) {
  let newShelf = e.target.value;
  // 转换逻辑...
  // 向上遍历DOM，找到带data-parent属性的父元素
  let currentEl = e.target;
  let parentSource = null;
  while(currentEl && !parentSource) {
    parentSource = currentEl.getAttribute('data-parent');
    currentEl = currentEl.parentElement;
  }
  if(parentSource) {
    console.log("事件来自:", parentSource);
  }
}

不过这个方法有个小缺点：依赖DOM结构，如果后续父组件的DOM布局改了，这个逻辑可能就失效了，所以只适合临时应急用。

3. 绑定事件时直接传递额外参数 #

你也可以修改select的onChange绑定，把父组件标识作为第二个参数传进去：

<select 
  value={this.props.value} 
  onChange={(e) => this.onShelfChange(e, this.props.parentType)}
>
  <option>Currently Reading</option>
  <option>Want to Read</option>
  <option>Read</option>
  <option>None</option>
</select>

然后修改onShelfChange的参数接收：

onShelfChange(e, parentSource) {
  let newShelf = e.target.value;
  // 转换逻辑...
  console.log("事件来自:", parentSource);
  // 后续处理
}

这个方案和第一种本质上是一样的，只是把参数传递的时机放在了事件绑定环节，同样很可靠。

总的来说，优先选第一种或第三种方案，它们更符合React的设计思路，代码也更健壮。

内容的提问来源于stack exchange，提问作者Diego Leonvendagar