Question

我正在使用Material UI库，无法弄清楚是否有一种方法可以在List Item上发生2个不同的点击事件。

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

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

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

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

谢谢！

Answer 1

Event.stopPropagation()

防止当前事件在捕获和冒泡阶段进一步传播。

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

因此，当点击“头像”节点时，e.stopPropagation()中的insideAvatarFunction行应该阻止onClick / onTouchTap进一步传播到父节点ListItem {1}}组件。

以下是关于Javascript Events Order和事件冒泡的有趣读物。

Answer 2

如果有其他人遇到这个问题，@ zv.diego的评论解决了这个问题。

我将stopPropagation()放在div onClick的函数中，并将父级切换为onClick而不是onTouchTap并且它有效！

Material-UI React.js，有没有办法为ListItem和ListItem的头像提供onClick事件？

2 个答案: