材质 UI 列表 - 单独的 OnClick 以展开答案

【问题标题】：Material UI List - Separate OnClick for Expand材质 UI 列表 - 单独的 OnClick 以展开
【发布时间】：2018-11-23 13:13:39
【问题描述】：

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

基本上，我希望在他们单击列表项上除胡萝卜图标之外的任何位置时执行默认程序，然后在他们尝试展开嵌套列表时执行单独的程序。

这可能吗？

注意：我使用的是ReactJs

【问题讨论】：

标签： reactjs list material-ui nested-lists

【解决方案1】：

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

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'));

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

<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>

【讨论】：