為什么 Material-UI 按鈕的值未傳遞給 onClick 事件處理程序？

Question

我試圖從 Material-UI 按鈕單擊它的單擊處理程序時傳遞一個值，但它始終顯示undefined的value 。 早些時候，當我使用一個簡單的按鈕時，我獲得了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 按鈕文本

文檔：

• https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget