javascript - 将 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 向没有属性名称的 Button 添加了两个跨度，因此当我单击按钮时，会调用该函数，但在单击跨度时不会调用

标签： javascriptreactjsmaterial-ui

您可以使用event.currentTarget.value而不是event.target.value.

Material-uiButton有一个嵌套span在中button，所以当你使用event.target.value并且用户点击span你时，你会得到spanas event.target，如果你使用event.currentTarget你会得到事件监听器附加到的元素 - 按钮。

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

javascript - 将 onclick 添加到 UI 材质按钮

问题描述

解决方案

推荐阅读