Могу ли я указать отдельный обработчик onClick для значка TextField?

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

Answer 2

Один из вариантов, который следует рассмотреть, - это визуализация иконки отдельно:

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

демонстрация