Material-UI 图标干扰了按钮的工作答案

【问题标题】：Material- UI icon disturbing the working of buttonMaterial-UI 图标干扰了按钮的工作
【发布时间】：2021-09-07 10:59:50
【问题描述】：

当我点击图标周围的空间时，按钮正常工作并且帖子被删除。但是当点击图标(<DeleteOutlineOutlinedIcon />)时，帖子没有被删除。因为按钮的名称是道具。 id，当我记录名称时，它显示未定义，我也尝试为图标赋予相同的名称，但仍然不起作用。

<button name={props.id} onClick={deletePost}><DeleteOutlineOutlinedIcon /></button>

这是deletePost 函数

function deletePost(e){
        e.preventDefault();
        if(window.confirm("Are you sure to delete"))
        {
            let {name} = e.target;
            console.log(name);
            $.post("http://localhost:4000/delete" , {name})
            .done(res=>{
                setAll({value:res});
                console.log(allPosts);
            })
            .fail(e=>{console.log(e);})
        }
        
    }

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

理想情况下，您应该使用 <IconButton> </IconButton> 包装 MUI 图标组件，您可以使用 import {IconButton} from '@material-ui/core' 导入它，所以在您的情况下它将是 <IconButton onClick={deletePost}><DeleteOutlineOutlinedIcon /></IconButton>

编辑：获取name 属性的正确值尝试：

 let name = e.target.getAttribute('name');

顺便说一句，某些属性名称并不适合在这种情况下使用，并且在某些情况下可能会导致不良行为（例如，尝试在<th> HTML 元素上设置名称属性）你想要一个通常甚至不应该以这种方式完成的数据（变量），因为您可以轻松地执行 deletePost(e,props.id) 将 props.id 作为参数直接传递给您的函数。

【讨论】：

名称仍未定义
A.您是否将名称属性添加到外部 IconButton 组件？ B.props.id 来自哪里？你确定你做对了吗？你如何记录它？这与无法通过单击我在回答中提出的解决方案解决的嵌套图标来触发按钮事件的问题有什么关系。
是的，我把它放在IconButton 上，而且我已经验证 props.id 实际上是正确的，我在组件打印在屏幕上时记录了它，它正在成功记录，问题即将到来，单击按钮时显示未定义。该按钮实际上来自从节点 API 获取的映射数组。所以实际上一切都很好，但问题是这个按钮没有识别它。当我使用一个没有任何图标或其他东西的简单 html 按钮时，它工作正常。
你想从哪里得到名字？意思是你想在哪里使用它？您应该提供更多上下文，不清楚您真正想要实现的目标。 deletePost 函数的代码在哪里？
name 是正在渲染的元素的 object.id(mongodb 数据库)。因此，通过单击按钮 deletePost 函数将被调用，该函数将向服务器发送一个 ajax 发布请求，并传递要删除的帖子的 id（按钮中的名称）。

【解决方案2】：

人们可能需要更多背景信息才能完全理解该问题。乍一看，我想知道您为什么将组件包装在按钮中。

要使用 material-ui 创建带有图标的轮廓按钮，我会坚持使用 material-ui 文档。所以大致如下：

    <Button
    variant="outlined"
    color="secondary"
    className={classes.button}
    startIcon={<DeleteIcon />}
    >

其中<DeleteIcon/> 是您需要从material-ui 库中导入的图标。

【讨论】：