如何解决为什么 Material-UI 按钮的值没有传递给 onClick 事件处理程序?
我试图在点击 Material-UI 按钮时将值传递给它的点击处理程序,但它总是显示 value
的 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
解决方法
您需要使用 event.currentTarget.value
而不是 event.target.value
。
Material-UI Button
的文本位于 <span>
元素内的 <button>
内。当您点击文本时,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>
);
}
相关答案:
文档:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。