react中material-ui中Button组件点击获取自定义属性

Question

问题描述

就是使用react material-ui 自带的<Button> 绑定一个点击事件 获取<Button isT='true'> 其中自定义的属性 isT

问题出现的环境背景及自己尝试过哪些方法

出现的问题就是这个<Button>组件其中包含 span 和 font都跟着被绑定了点击事件 点击时会触发他们返回不了Button中的属性,阻止冒泡 默认事件都加了,代码了能看见,

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

import React from "react"
import Button from "@material-ui/core/Button"
class TestButtonEvent extends React.Component {
    constructor(props){
        super(props)
        this.state={

        }
    }
    handleClick(event){
        // event.stopPropagation();
        event.nativeEvent.stopImmediatePropagation();
        // event.preventDefalut()
        // alert(event.targrt.nodeName);
        console.log("0:"+event.target.nodeName)
        console.log("1:"+event.target.isTrue)
        console.log("2:"+event.target.getAttribute("isTrue"))
        }
    render(){
        
        return(
            <Button  size="large" isTrue="true" variant="contained" color="primary" onClick={this.handleClick.bind(this)}>123</Button>
            )
    }
}
export default TestButtonEvent

你期待的结果是什么？实际看到的错误信息又是什么？

期待的就是 使用event.target.isTrue能返回值

因为 span是按钮的中间部分 所以点击中间会返回span的属性可是没有我的自定义属性于是undefine null ,点到button的边边就能正确触发