office-ui-fabric - 我可以为 TextField 的图标指定一个单独的 onClick 处理程序吗？

Question

使用组件，我可以为装饰图标指定一个单独的 onClick 处理程序吗？

下面的代码不工作:

  <TextField
    {...passwordTextFieldProps}
    iconProps={{ iconName: 'RedEye', onClick: () => this.setState({ some new state }) }}
  />

Answer 1

在这篇文章的作者发表两年后，我遇到了同样的问题并找到了更好的解决方案。

onClick 事件在图标上可用，但默认情况下禁用(pointerEvents 设置为 none)。

通过一些样式它可以工作(我还添加了一个光标形状，因此图标看起来“可点击”，但它是可选的)。

<TextField iconProps={{ iconName: 'RedEye', style: { pointerEvents: "auto", cursor: "pointer" }, onClick: () => { ... } }} />