Question

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

下面的代码不起作用：

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

Answer 1

要考虑的一个选项是单独渲染图标：

<div style={{display:'flex', alignItems: 'center'}}>
    <TextField  />
    <Icon iconName="RedEye"  style={{left:'-25px',position:'relative'}} onClick={()=> console.log("Clicked")}  />
</div>

Demo

Answer 2

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

onClick事件在图标上可用，但默认情况下处于禁用状态（pointerEvents设置为none）。

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

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

我可以为TextField的图标指定单独的onClick处理程序吗？

2 个答案: