将onclick添加到UI材质按钮

Question

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

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

Answer 1

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

Material-ui的Button在span内有一个嵌套的button，因此当您使用event.target.value并且用户单击span时，您会得到{ {1}}与span一样，如果您使用event.target，则会获得事件侦听器所附加的元素-按钮。

查看有效示例：https://codesandbox.io/s/cocky-cookies-s5moo?file=/src/App.js

Answer 2

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

from sklearn.linear_model import LinearRegression
from sklearn.preprocessing import PolynomialFeatures
from sklearn.metrics.regression import r2_score
import numpy as np
from sklearn.model_selection import train_test_split


degrees = np.arange(0, 9)
np.random.seed(0)
n = 15
x = np.linspace(0,10,n) + np.random.randn(n)/5
y = np.sin(x)+x/6 + np.random.randn(n)/10
for i in degrees:
    poly = PolynomialFeatures(i+1)
    x_poly = poly.fit_transform(x.reshape(-1,1))
    X_train, X_test, y_train, y_test = train_test_split(x_poly, y, random_state = 0)
    linreg = LinearRegression().fit(X_train, y_train)
    r2_train = linreg.score(X_train, y_train)
    r2_test = linreg.score(X_test, y_test)

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

Answer 3

除了依赖 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>