Question

我有一个组件，可以与之保持联系，以便通过按住按钮来调用多个功能。我的动作为Redux减速器分配了一个简单的函数。

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

当我触发该功能时，控制台会返回我：

无法读取未定义的属性'currentTarget'

当我单独单击一次时，效果很好。但是，当我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

1 个答案: