Javascript mouseDown-无法读取未定义的当前目标

我有一个composent，我可以使用它来保持单击，以便通过按住按钮调用多个函数。我的操作将一个简单的函数分派给Redux还原程序

我的组件的目标是允许人们通过保持鼠标点击来减少订单数量。让它，让访问者有一个更流畅的用户体验

当我触发函数时，我的控制台将返回我：

无法读取未定义的属性“currentTarget”

当我一个人点击一次，它是伟大的。但当我按下鼠标时，上面的消息失败了

下面是我的reactComponent.js：

import React, {Component} from 'react'
import style from "./OrderRibbon.css";

import equal  from 'deep-equal';


export default class OrderRibbon extends Component {

    t;
    start = 100;


    decreaseQuantity = (e) => { 
        e.preventDefault(); 
        this.props.decreaseOrder(this.props.id)
    }

    addOrder= (e) => { 
        e.preventDefault(); 
        this.props.addOrder(this.props.id)
    }


    orderPushing = (e) => {
        e.preventDefault();
        this.orderRepeat(e);
    }    

    orderRepeat = (e) => {

        if( e.currentTarget.attributes.name.value ){ 
            console.log("EVENT NAME IN ORDER REAPEAT: ", e.currentTarget.attributes.name.value)
        }else{ 
            console.log("EVENT NAME IN ORDER REAPEAT: ", e.target.attributes.name.value)
        }
        if(e.currentTarget.attributes.name.value === "addOrder"){ 
            this.addOrder
        }else{ 
            this.decreaseQuantity
        } 
        this.t = setTimeout(this.orderRepeat, this.start);
        this.start = this.start / 2;
    }



    // STOP Calling function
    onMouseUp = () => {
        clearTimeout(this.t);
        this.start = 100;
    }

      render(){ 
            return (
                <div className={style.order_ribbon_layout} >


                    <div className={`${style.title} ${style.details_element}`} >
                        {this.props.title} 
                        <div className={style.quantity} >
                            <div className= {style.quantity_icon}></div> 
                            <span  className= {style.quantity_number} > {this.props.quantity} </span> 
                        </div>
                    </div>


                    <div className={style.price} >
                        {this.props.price * this.props.quantity} 
                    </div>    

                    <div className={style.quantity} > 
                        <div 
                         onMouseUp={this.onMouseUp}
                         onMouseDown={this.orderPushing}
                        name="decreaseQuantity"
                        onClick={this.decreaseQuantity} 
                        className={ `${style.cardButton}`}  
                        id={style.decreaseQuantity}></div>
                        <div 
                        onMouseUp={this.onMouseUp}
                        onMouseDown={this.orderPushing}
                        name="addOrder"
                        onClick={this.addOrder} 
                        className={ `${style.addButon}`}  
                        // ${style.details_element}
                        id={style.addArticle}></div>
                    </div>

                </div>
            )
    }
}

import React，{Component}来自“React”
从“/OrderRibbon.css”导入样式；
从“深度相等”导入相等；
导出默认类OrderRibbon扩展组件{
T
开始=100；
减量=（e）=>{
e、 预防默认值（）；
this.props.decreaseOrder（this.props.id）
}
addOrder=（e）=>{
e、 预防默认值（）；
this.props.addOrder（this.props.id）
}
订单推送=（e）=>{
e、 预防默认值（）；
此命令重复（e）；
}    
orderRepeat=（e）=>{
如果（e.currentTarget.attributes.name.value）{
log（“事件名称顺序重复：”，e.currentTarget.attributes.NAME.value）
}否则{
log（“事件名称按顺序重复：”，e.target.attributes.NAME.value）
}
如果（e.currentTarget.attributes.name.value===“addOrder”）{
这是我的订单
}否则{
这使数量减少
} 
this.t=setTimeout（this.orderRepeat，this.start）；
this.start=this.start/2；
}
//停止调用函数
onMouseUp=（）=>{
clearTimeout（this.t）；
这个.start=100；
}
render（）{
返回(
{this.props.title}
{this.props.quantity}
{this.props.price*this.props.quantity}
)
}
}

---

我不知道出了什么问题，如果任何人有一个提示，那就太好了。

您有事件绑定问题。您可以这样定义：

orderPushing = () => (e) => {
  e.preventDefault();
  this.orderRepeat(e);
}

onMouseDown={(e) => this.orderPushing(e)}

或者，与当前相同，您可以使用以下内联事件绑定：

orderPushing = () => (e) => {
  e.preventDefault();
  this.orderRepeat(e);
}

onMouseDown={(e) => this.orderPushing(e)}