Question

下面有一个组件：有2个用例，当我单击整个div时，将执行某些功能，而当我仅单击<img>时，将执行某些功能。单击整个onClick时，我定义了2个道具div 和onIconClick（在img上单击）。

export default class List extends React.Component {
  onClick() {
    this.props.onClick();
  }
  onIconClick() {
    this.props.onIconClick();
  }
  render() {
    return (
      <div style="width:200px, height: 200px" onClick={this.onClick.bind(this)}>
        <img src="delete.png" onClick={this.onIconClick.bind(this)} />
      </div>
    );
  }
}

这是我调用组件的方式：

export default class MyApp extends React.Component {
  onClick() {
    //some execution
  }
  onIconClick() {
    //some other execution
  }
  render() {
    return (
      <List
        onClick={this.onClick.bind(this)}
        onIconClick={this.onIconClick.bind(this)}
      />
    );
  }
}

现在，我的问题是this.onClick.bind(this)一直都被调用，即使我单击图像也是如此，因此我再也找不到this.onIconClick.bind(this)了。

我尝试撤消订单：

 <List onIconClick={this.onIconClick.bind(this)} onClick={this.onClick.bind(this)} />

仍然不起作用，不确定我应使用什么选择标准来区分这两次点击。

任何想法？

Answer 1

您可以使用e.stopPropagation()。如果要使用e.nativeEvent.stopImmediatePropagation()，则可以在同一行中使用。

onIconClick(e) {
    e.stopPropagation();
    //e.nativeEvent.stopImmediatePropagation();
    this.props.onIconClick();
  }

Answer 2

尝试一下：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.onIconClick = this.onIconClick.bind(this);
  }
  onClick() {
    alert("Parent-onClick()");
  }
  onIconClick() {
    alert("Parent-onIconClick()");
  }
  render() {
    return (
      <div>
        <Child onClick={this.onClick} onIconClick={this.onIconClick} />
      </div>
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.onIconClick = this.onIconClick.bind(this);
  }
  onClick() {
    this.props.onClick();
  }
  onIconClick(e) {
    e.stopPropagation();
    this.props.onIconClick();
  }
  render() {
    let styles = {
      height: "500px",
      backgroundColor: "blue",
      paddingTop: "20px"
    };
    return (
      <div onClick={this.onClick} className="img-wrapper" style={styles}>
        <img
          onClick={this.onIconClick}
          src="https://via.placeholder.com/350x150"
          alt="img"
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"><div>

这个想法是使用SyntheticEvent实例的stopPropagation()方法。

您的事件处理程序将通过SyntheticEvent实例传递，   c 浏览器本地事件周围的罗斯浏览器包装器。它具有   与浏览器的本地事件相同的界面，包括    stopPropagation（）和 preventDefault（），事件除外   在所有浏览器中都相同。

如果发现您需要一些基础浏览器事件   原因，只需使用 nativeEvent 属性即可获取它。

使用SyntheticEvent的方法可以使我们的代码在所有浏览器中的行为完全相同。

如何避免React组件上的onclick函数冲突

2 个答案: