使用`addEventListener`将点击事件添加到React组件内的图标

Question

我正在尝试为我的React应用程序中的图标添加一个事件侦听器，这样我就可以在单击图标时触发一个函数(单击周围的TextField是不够的)。我需要手动完成此操作，因为fluentui-react元素上没有click属性。

到目前为止，虽然根据我的console.log可以看到已经选择了正确的DOM元素，但是当我单击图标时，什么也没有发生。

我在componentDidUpdate()中处理这个问题，如下所示：

  componentDidUpdate() {
    const node = ReactDOM.findDOMNode(this);
    if (this.props.sessionsWithNotes.length) {
      if (node instanceof HTMLElement) {
        const child = node.querySelector('i');
        console.log('child: ', child); // I see this in the console
        child.addEventListener('click', () => console.log("Clear icon clicked!")); // This does not print to the console upon click of the icon
      }
    }
  }

为了清楚起见，我登录到控制台的child显示如下：

<i data-icon-name="clear" aria-hidden="true" class="icon-167"></i>

这就是正确的图标元素。然而，当我在控制台中看到它出现后，当我点击它时，什么也没有发生--也就是，我的console.log“清除图标已点击！”不会打印到控制台。

请注意，使用react-fluent-ui的相关JSX块如下所示：

  <TextField
    label="ID:"
    defaultValue={this.props.filters.id}
    onChange={this.onFilterById}
    styles={{ root: { maxWidth: 300 } }}
    borderless
    underlined
    iconProps={iconProps}
  />

iconProps看起来像这样：

const iconProps = {
  iconName: 'clear',
  cursor: 'pointer',
};

这里我漏掉了什么？

Answer 1

似乎他们禁用了TextField下的指针事件图标

https://github.com/microsoft/fluentui/blob/master/packages/react-internal/src/components/TextField/TextField.styles.tsx

我假设您可以通过向iconProps提供内联样式并将指针事件设置为'auto‘来覆盖此行为，然后像往常一样传递onClick，它将如下所示：

<TextField iconProps={style: {pointerEvents: 'auto'}, onClick: () => {..}} />