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

Question

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

我的组件的 objective 允许人们通过保持鼠标点击来减少他们的订单数量。这样吧，为了让访问者有更流畅的用户体验。

当我触发功能时我的控制台 returns 我 :

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

您遇到事件绑定问题。你可以这样定义：

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

或者，保持与当前相同，您可以像这样使用内联事件绑定：

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

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

Javascript mouseDown - cannot read currentTarget of undefined

javascript

mousedown

reactjs