将onclick添加到UI材质按钮 [英] Adding onclick to UI material button

问题描述

我试图在材质用户界面中添加onClick事件处理程序，有时将其调用，有时则不.但是，使用常规按钮可以正常工作

I am trying to add an onClick eventhandler into a material ui and sometimes it is called, sometimes it is not. However, it's working fine with regular buttons

 handleClick = (event) => {
    const value = event.target.value;
    console.log(value);
    this.setState({ filtered: this.state.videos.filter(item => { 
            return item.category === value
        })
    })

<Button value="java" onClick={this.handleClick}  color="primary">Java</Button> 
<Button value="React" onClick={this.handleClick} color="primary">React</Button> 
<Button value="C#" onClick={this.handleClick}  color="primary">C#</Button> 
<Button value="javascript" onClick={this.handleClick} color="primary">JavaScript</Button> 

当我更新到console.log以获取event.target时，我得到的结果如下图所示我找到了问题，但仍然不知道如何解决.React向Button添加了两个没有属性名称的跨度，因此当我单击按钮时，将调用该函数，但是当我单击跨度时不会调用

when I updated to console.log to get event.target, I got the result shown in the image below I found the issue, but still don't know how yo fix it. React adds two spans to the Button that have no attribute name, so when I click the button, the function gets called, but not when I click the span

推荐答案

在句柄内单击，您也可以执行以下操作:

Inside your handle click, you could also do:

return (item.category === value || item.category === event.target.innerHTML)

但是显然CD ..的答案更好

But obviously CD..’s answer is better

这篇关于将onclick添加到UI材质按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！