Материал UI IconButton onClick не позволяет обрабатывать событие

Question

Я установил "@material-ui/core": "^4.9.2" и "@material-ui/icons": "^4.9.1".

В моей форме у меня есть несколько строк, в каждой строке есть кнопка добавления и кнопка удаления. Я хочу, чтобы кнопка удаления удаляла строку, в которой была нажата кнопка. Он отлично работает с обычной кнопкой с символом "-" в ней. Но я хочу, чтобы это было необычно, поэтому я заменил свою кнопку на IconButton и импортировал значки для использования.

import {AddCircleOutline,RemoveCircleOutlineOutlined} from "@material-ui/icons";

А мой IconButton выглядит так:

        <IconButton
          onClick={props.onRemoveClick}
          className="align-self-center"
          color="info"
          size="sm"
          disabled={props.index > 0 ? false : true}
          <RemoveCircleOutlineOutlined/>
        </IconButton>

При нажатии IconButton вызывается метод onClick (я знаю это из-за журналов в моей консоли), но я не могу обработать событие, потому что теперь оно не определено.

Самое забавное, что если я нажимаю на область кнопки, которая не соответствует значку, она работает. Но, очевидно, мне нужно, чтобы он работал во всей области кнопки.

Это не является обязательной проблемой, потому что я уже тестировал ее.

Есть идеи?

Answer 1

Реквизиты, не упомянутые в документации, наследуются своим внутренним <EnhancedButton />, поэтому вам нужно использовать обертку.

      <IconButton
          onClick={(e) => props.onRemoveClick(e)}
          className="align-self-center"
          color="info"
          size="sm"
          disabled={props.index > 0 ? false : true}
          <RemoveCircleOutlineOutlined/>
        </IconButton>

Answer 2

Ну вы подали идею. Поскольку мне нужен индекс для идентификации кнопки строки, я отправил индекс через параметр в методе onClick, например:

onClick={e => props.onRemoveClick(props.index)}

Таким образом, мне не нужно было обрабатывать событие. Мне также пришлось привязать свой метод к конструктору:

constructor(props) { super(props); this.handleRemoveClick = this.handleRemoveClick.bind(this); }

Теперь я получил желаемое поведение

Answer 3

Вы можете увидеть GitHub ussue здесь. Есть некоторая проблема с файлами определений машинописного текста, но мы можем ее обойти.

Решение

Я пытался решить эту проблему, как в случае с github, но не сработало. Так что это работает для меня.

const onClick = (e: any) => {
    // e is of type any so the compiler won't yell at you

}
<IconButton onClick={(e) => onClick(e)}>

Answer 4

Я не знаю причину, но использую e.currentTargetпомог мне получить кнопку, которую я хотел, а не значок материала внутри нее.

      onClick={(e) => {
    return console.log(e.currentTarget)
}}