我可以为 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: () => { ... } }} />