将onclick添加到UI材质按钮

我正在尝试将 onClick 事件处理程序添加到材质 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> 

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

您可以使用event.currentTarget.value代替event.target.value.

Material-uiButton有一个嵌套的span在 - 的里面button，所以当你使用event.target.value用户点击span你得到span as event.target，如果你想使用event.currentTarget您将获得事件侦听器附加到的元素 - 按钮。

查看一个工作示例：https://codesandbox.io/s/cocky-cookies-s5moo?file=/src/App.js