将 onclick 添加到 UI 材质按钮

IT技术 javascript reactjs material-ui
2021-05-14 23:09:56

我正在尝试将 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 添加了两个跨度，因此当我单击该按钮时，该函数被调用，但当我单击该跨度时不会

在此处输入图片说明

3个回答

您可以使用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

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

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

但显然 CD .. 的答案更好

除了依赖 currentTarget 之外，您始终可以将参数柯里化到回调函数中（假设您没有传入静态内容，但可能是迭代的索引或存储在对象中的一些动态值等）

例子

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>
其它你可能感兴趣的问题
上一篇用于非平面打印的针热端 下一篇我可以在阳光下晒干 PETG 灯丝吗？