Javascript 包含多个嵌套元素的按钮在reactjs中未返回正确的目标

我有一个按钮，里面有多个元素

<button onClick={this.selectButton.bind(this)} id="cash">
  <img src="../resources/cash.png" alt="" className={`${styles.imageWidth}`} /><br />
  CASH
</button>

当我单击按钮的边框时，它的工作原理是它带来了正确的id，但是当我单击图像顶部时，控制台会记录一个空字符串或什么都没有

---

解决此问题的正确路径是什么？

事件。target

是对已单击项目的引用，因此在本例中，当您单击按钮的中心时，实际上是在单击图像元素

event.currentTarget

更可能是您正在查找的，它引用触发事件的元素

不过，对于您的方法，有几点需要注意。react的一个优点是您很少需要直接访问DOM元素。“更具反应性”的解决方案是将按钮包装在自定义组件中，并通过自定义属性向下传递ID，如下所示：

class MyButton extends React.Component {
  constructor() {
    this.onClick = this.onClick.bind(this)
  }
  onClick() {
     this.props.clickHandler(this.props.id)
  }
  render() {
    return <button onClick={this.onClick}></button>;
  }
}

class MyButton扩展了React.Component{
构造函数（）{
this.onClick=this.onClick.bind（this）
}
onClick（）{
this.props.clickHandler（this.props.id）
}
render（）{
返回；
}
}

然后您可以在主要组件中使用它，如下所示：

class MyComponent extends React.Component {
  selectButton(id) {
     console.log(id)
  }
  render() {
    return <MyButton clickHandler={this.selectButton} id="cash" />;
  }
}

类MyComponent扩展了React.Component{ 选择按钮（id）{ 控制台日志（id） } render（）{ 返回； } }

---

注意，最好将回调绑定到render（）之外，以避免不断生成新函数。在本例中，我将其移动到组件的构造函数中，因此它只发生一次。

事件。target

是对已单击项目的引用，因此在本例中，当您单击按钮的中心时，实际上是在单击图像元素

event.currentTarget

更可能是您正在查找的，它引用触发事件的元素

不过，对于您的方法，有几点需要注意。react的一个优点是您很少需要直接访问DOM元素。“更具反应性”的解决方案是将按钮包装在自定义组件中，并通过自定义属性向下传递ID，如下所示：

class MyButton extends React.Component {
  constructor() {
    this.onClick = this.onClick.bind(this)
  }
  onClick() {
     this.props.clickHandler(this.props.id)
  }
  render() {
    return <button onClick={this.onClick}></button>;
  }
}

class MyButton扩展了React.Component{
构造函数（）{
this.onClick=this.onClick.bind（this）
}
onClick（）{
this.props.clickHandler（this.props.id）
}
render（）{
返回；
}
}

然后您可以在主要组件中使用它，如下所示：

class MyComponent extends React.Component {
  selectButton(id) {
     console.log(id)
  }
  render() {
    return <MyButton clickHandler={this.selectButton} id="cash" />;
  }
}

类MyComponent扩展了React.Component{ 选择按钮（id）{ 控制台日志（id） } render（）{ 返回； } }

---

注意，最好将回调绑定到render（）之外，以避免不断生成新函数。在本例中，我将其移动到组件的构造函数中，因此它只发生一次。

图像可能太大了。它甚至有按钮那么大？如果在图像上添加

onClick={this.selectButton.bind（this）}id=“cash”

，那么它可能会工作，对吗？图像可能太大了。它甚至有按钮那么大？如果在图像上添加

onClick={this.selectButton.bind（this）}id=“cash”

，那么它可能也能工作，对吗？