Material ui 材质UI图标按钮点击不'；让我们来处理这个事件

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

在我的表单中，我有几行，每行有一个add按钮和一个remove按钮。我希望“删除”按钮从单击的行中删除该行。它适用于带有“-”字符的常规按钮。但是我想让它看起来很别致，所以我把我的按钮从图标按钮中替换了出来，并导入了要使用的图标

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

我的图标按钮是这样的：

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

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

0？假：真}

当点击IconButton时，会调用onClick方法（我知道是因为控制台中有日志），但我无法处理该事件，因为它现在未定义

有趣的是，如果我点击与图标不对应的按钮区域，它就会工作。但很明显，我需要它在按钮的整个区域工作

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

---

有什么想法吗？

文档中未引用的道具将继承到它们的内部

，因此您需要使用包装器

props.onRemoveClick（e）}
className=“对齐自中心”
color=“info”
size=“sm”
disabled={props.index>0？false:true}

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

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

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

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

构造函数（道具）{
超级（道具）；
this.handleRemoveClick=this.handleRemoveClick.bind（this）；
}

---

现在我得到了想要的行为

您可以看到github ussue。typescript定义文件有一些问题，但我们可以解决它

解决方案

我试图像解决github问题一样解决它，但没有成功。这对我来说很有用

constonclick=（e:any）=>{
//e是any类型的，所以编译器不会对你大喊大叫
}
onClick（e）}>

进一步的测试表明，事件不是未定义的，它确实得到了处理。问题是它没有检索有效的id（event.target.id），而是给了我一个空字符串“”。我需要按钮的id来标识要删除的行。Thnaks，但它使事情变得更糟。现在，当我调用：

e.target.id

i get“TypeError:cannotreadproperty'target'of undefined”时，事件没有在处理程序上定义，如果您需要访问事件传递事件对象。这是标准方法，如果您需要事件对象，您只需添加一个参数，它也可以与所有其他方法一起使用（编辑答案），无论哪种方法，如果答案对您有帮助，请接受。