Material UI IconButton onClick 不允许处理事件

Posted 2023-02-23

【中文标题】Material UI IconButton onClick 不允许处理事件

【英文标题】：Material UI IconButton onClick doesn't let to handle event

【发布时间】：2020-05-29 19:53:57

【问题描述】：

我安装了“@material-ui/core”：“^4.9.2”和“@material-ui/icons”：“^4.9.1”。

在我的表单中，我有几行，每行都有一个添加按钮和一个删除按钮。我希望删除按钮从中删除被单击的行。它适用于其中带有“-”字符的常规按钮。但我想要它花哨，所以我用 IconButton 替换了我的 Button，并导入了要使用的图标

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 方法（我知道是因为控制台中的日志），但我无法处理该事件，因为它现在未定义。

有趣的是，如果我单击与图标不对应的按钮区域，它会起作用。但显然我需要它在按钮的整个区域工作。

这不是绑定问题，因为我已经测试过了。

有什么想法吗？

【问题讨论】：

进一步的测试表明该事件不是未定义的，它确实被处理了。问题是它没有检索有效的 id (event.target.id)，而是给了我空字符串“”。我需要按钮的 id 来识别要删除的行。

【参考方案1】：

文档中没有引用的props都继承到了它们内部的<EnhancedButton />，所以你需要使用一个包装器。

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

【讨论】：

Thnaks，但它让事情变得更糟。现在，当我调用时，事件未在处理程序上定义：e.target.id 我得到“TypeError: Cannot read property 'target' of undefined”

如果您需要访问事件传递事件对象。这是标准方式，如果您需要事件对象，您只需添加一个参数，它也适用于所有其他方法（编辑答案），无论哪种方式，如果对您有帮助，请接受答案。

【参考方案2】：

嗯，你给出了一个想法。因为我需要一个索引来识别行的按钮，所以我通过 onClick 方法上的参数发送索引，如下所示：

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

这样我就不需要处理事件了。我还必须在构造函数上绑定我的方法：

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

现在我得到了想要的行为

【参考方案3】：

你可以看到github ussue here。打字稿定义文件存在一些问题，但我们可以解决它。

解决方案

我尝试像在 github 问题中一样解决它，但没有奏效。所以这对我有用。

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


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