Question

我有一个material ui列表，其中包含一个嵌套列表。我想知道当有人点击列表项目的任何地方时，以及当他们专门点击展开图标（列表项右侧的倒置胡萝卜图标）时，我是否可以拥有单独的onClick处理程序。

基本上，我想要一个默认程序，当他们点击胡萝卜图标旁边的列表项目的任何地方时，然后单独的程序，当他们尝试扩展嵌套列表时。

这可能吗？

注意：我正在使用ReactJs

Answer 1

您应该在图标点击上使用e.stopPropagation();，以防止事件冒泡到父母：

＆＃13;

class App extends React.Component {

  parentClick = () => {
    console.log('Parent clicked!');
  };
  
  iconClick = e => {
    e.stopPropagation();
    console.log('Icon clicked!');
  };
  
  render () {
    return (
      <div className="item" onClick={this.parentClick}>
        <span>Really long text to take up some room in the item.</span>
        <span onClick={this.iconClick}>Icon</span>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

＆＃13;

.item {
  margin-top: 20px;
  padding: 15px;
  background: #ededed;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

材质UI列表 - 单独的OnClick for Expand

1 个答案: