Javascript 添加onclick到UI材质按钮

我试图将onClick eventhandler添加到material ui中，有时调用，有时不调用。但是，它可以与常规按钮配合使用

 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> 

handleClick=（事件）=>{
常量值=event.target.value；
console.log（值）；
this.setState（{filtered:this.state.videos.filter（item=>{
返回项。类别===值
})
})
JAVA
反应
#
JavaScript

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

---

您可以使用

event.currentTarget.value

而不是

event.target.value

材质ui的

按钮

在

按钮

内有一个嵌套的

span

，因此当您使用

event.target.value

并且用户单击

span

时，如果您使用

event.currentTarget

，您将获得事件侦听器所附加的元素按下按钮

---

请参见一个工作示例：

在手柄内单击，您还可以执行以下操作：

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

---

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

除了依赖currentTarget之外，您还可以将参数curry到回调函数（假设您没有传递静态内容，但可能传递迭代的索引或存储在对象中的某些动态值，等等）

范例

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

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

handleClick=（值）=>（）=>{
console.log（值）；
this.setState（{filtered:this.state.videos.filter（item=>{
返回项。类别===值
})
})
JAVA
反应
#
JavaScript

你的代码没有问题。我没有发现任何问题。你能分享你的完整代码吗？这样我就可以在我这边重现。@Khabir你能检查我更新的问题吗？you bro，下次你结束问题时，一定要先试用代码。@Zocatelli，对不起，如果你还需要帮助，让我们在