1

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

到目前为止，虽然我可以根据我的 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">&lt;/i>

所以这是正确的图标元素。但是，当我在控制台中看到它显示后单击它时，什么也没有发生 - 即我的 console.log 中的“Clear icon clicked!” 不会打印到控制台。

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

  <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',
};

我在这里想念什么？

4

1 回答 1

2

好像他们禁用了 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: () => {..}} />
于 2021-01-21T16:03:01.083 回答