为什么 Material-UI 按钮的值没有传递给 onClick 事件处理程序？

Question

我试图在单击 Material-UI 按钮时将值传递给它的单击处理程序，但它始终显示 value of undefined。早些时候，当我使用一个简单的按钮时，我得到了 value 但之后没有。

const categoryChangedHandler = (e) => {
        console.log("category choosed ========= " + e.target.value);
        setCategory(e.target.value);

    };

<Button className="CategoryButton" variant="outlined" color="primary"
                                value={category}
                                onClick={e => categoryChangedHandler(e)}
                                style={{ textAlign: 'center' }}
                            >
                                {category}
                            </Button>

我得到的结果是：

category choosed ========= undefined

Answer 1

您需要使用 event.currentTarget.value 而不是 event.target.value。

Material-UI Button 的文本在 <button> 元素内的 <span> 内。单击文本时，event.target 将引用 span 元素；而 event.currentTarget 将引用点击事件冒泡到的附加事件处理程序的元素（即按钮元素）。

这是一个简单的工作示例：

import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <Button value="hello" onClick={(e) => console.log(e.currentTarget.value)}>
      Hello World
    </Button>
  );
}

为什么 Material-UI 按钮的值没有传递给 onClick 事件处理程序？

Why value from a Material-UI Button is not being passed to the onClick event handler?

onclick

buttonclick

reactjs

material-ui