Javascript mouseDown - 无法读取未定义的 currentTarget

Question

我有一个组件，我可以使用它来保持单击，以便通过按住来调用多个功能。我的操作向 Redux reducer 分派(dispatch)一个简单的函数。

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

当我触发该函数时，我的控制台返回给我:

Cannot read property 'currentTarget' of undefined

当我单独点击一次时，感觉很棒。但是当我按下 mouseDown 时，它会失败并显示上述消息。

这是我的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>
            )
    }
}

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

Answer 1

您有事件绑定(bind)问题。您可以这样定义:

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

或者，保持与当前相同，您可以使用内联事件绑定(bind)，如下所示:

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