reactjs - Material-UI React.js，有没有办法让 ListItem 和 ListItem 的头像都有一个 onClick 事件？

Question

我正在使用 Material UI 库，无法弄清楚是否有办法在一个列表项上发生 2 个不同的点击事件。

这基本上就是我所拥有的:

    <ListItem
      leftAvatar={
        <div onClick={() =>
          insideAvatarFunction()}
        >
          {<Avatar />}
        </div>
      }
      primaryText={primaryText}
      onTouchTap={() => everywhereClickFunction}
    />);

onTouchTap 触发，并忽略 leftAvatar 内部的 onClick。如果外部 onTouchTap 不存在，则 onClick 触发正常。

有没有办法让 onTouchTap 在点击头像以外的任何地方时触发？

谢谢!

Answer 1

Event.stopPropagation()

Prevents further propagation of the current event in the capturing and bubbling phases.

import React from 'react';
import {List, ListItem} from 'material-ui/List';
import Avatar from 'material-ui/Avatar';

export default class App extends React.Component {

  insideAvatarFunction(e) {
    e.stopPropagation();
    console.log('Fired insideAvatarFunction()!');
  }

  everywhereClickFunction(e) {
    console.log('Fired everywhereClickFunction()!');
  }

  render () {
    return (
      <List>
        <ListItem primaryText="Inbox"
          leftAvatar={
            <div onClick={this.insideAvatarFunction}>
              <Avatar />
            </div>
          }
          onTouchTap={this.everywhereClickFunction}
          onClick={this.everywhereClickFunction}
        />
      </List>
    );
  }
}

因此，当单击 Avatar 的节点时，insideAvatarFunction 中的 e.stopPropagation() 行应该阻止 onClick/onTouchTap 进一步传播到父节点，即ListItem 组件。

这是一篇关于 Javascript Events Order 的有趣读物和事件冒泡。