Reactjs 使用“addEventListener”将单击事件添加到React组件内的图标

我正在尝试向React应用程序中的图标添加一个事件侦听器，以便在单击图标时启动一个功能（单击周围的

TextField

是不够的）。我需要手动执行此操作，因为

fluentui react

元素上没有

click

属性

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

我在

componentdiddupdate（）

中处理此问题，如下所示：

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

需要说明的是，我正在登录到控制台的

子项显示如下：



这就是正确的图标元素。但是，当我在控制台中看到显示的图标后单击它时，什么也没有发生-例如，“Clear icon clicked！”的我的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}
  />

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

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

我在这里遗漏了什么？
似乎他们禁用了TextField下图标的指针事件


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

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

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

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

{..}}/>
我可以问一下为什么不能直接访问元素吗？请共享组件的完整详细信息。
fluentui react
定义的
iconProps
上没有
click
属性，单击事件需要在图标本身上，而不是在它所属的
TextField
上。所以我需要手动定义它。如果我误解了你，请让我知道。这太奇怪了，我应该看看医生！我有，其他人也有。当它包含在
文本字段中时，
图标上没有
click
属性。我确实为测试制作了codesandbox，你的
光标：“指针”
有效吗？这是直接访问click事件的一种方式吗，很好。我告诉过你这太奇怪了@b3hr4d，我想这是因为您覆盖了
iconProps
的默认行为。默认情况下，他们可以定义一个
点击
，但他们没有。但是你可以按照上面@Eyal的建议来覆盖默认的道具。多亏了Eyal和Muirik，我今天学到了一些新东西。但是我认为另一种方法可以被拆分，正如这里提到的@b3hr4d，当左边是一个输入字段时，
拆分按钮是否会工作，就像这里的情况一样？我有我的怀疑。我认为一个
split
意味着一个按钮有两个不同的
click
事件。最终的解决方案是，应用所需的指针样式：`iconProps={{{style:{pointerEvents:'auto'，cursor:'pointer'}，iconName:'clear'，onClick:=>{this.clearTextField（）}`