The applet methods call each other this.onClickCancel is not a function

background

Made a custom pop-up dialog window, mainly to customize some text colors.

question

But click the button event: cancel and confirm, call the same interface, and then think about different methods, you need to call other methods of methods. Then an error was reported:

VM1081 WAService.js:2 TypeError: _this.onClickCancel is not a function

 Effect:

Thinking about whether the methods methods cannot call each other. Finally, I found out that I put the method outside methods:{}.

as follows

Component({
  properties: {showModal: true},
  data: {},
  lifetimes: {
    attached() {
      console.log(">>showModal", this.data.showModal)
    }
  },
  onClickCancel(e) {
    console.log('>>点击了取消')
    this.triggerEvent('onclickcancel')
  },
  onClickComfirm(e) {
    console.log("点击了确认")
    this.triggerEvent('onclickcomfirm')
  },
  methods: {
    onClickMask(e) {
      console.log(">>>点击 onClickMask", e)
      console.log(this)
      console.log(">>> methods", this.methods)
      if (e.target.dataset.cancel) {
        this.methods.onClickCancel(e)
        this.setData({
          showModal: false
        })
      } else if (e.target.dataset.comfirm) {
        this.methods.onClickComfirm(e)
        this.setData({
          showModal: false
        })
      }
    } ,
  
  },

});

 solve:

You should put the two methods : onClickCancel(), onClickCommfirm() in methods{},

But after putting it in, it still reports an error.

The reason is that the calling format statement is wrongly written:

 this.methods.onClickCancel(e)

 this.methods.onClickComfirm(e)

Change to:

this.onClickCancel(e)

 this.onClickComfirm(e)

 final code

Attach the entire case source code of the custom pop-up window:

Component({
  properties: {showModal: true},
  data: {},
  lifetimes: {
    attached() {
      console.log(">>showModal", this.data.showModal)
    }
  },
  methods: {
    onClickMask(e) {
      console.log(">>>点击 onClickMask", e)
      console.log(this)
      if (e.target.dataset.cancel) {
        this.onClickCancel(e)
        this.setData({
          showModal: false
        })
      } else if (e.target.dataset.comfirm) {
        this.onClickComfirm(e)
        this.setData({
          showModal: false
        })
      }
    },
    onClickCancel(e) {
      console.log('>>点击了取消')
      this.triggerEvent('onclickcancel')
    },
    onClickComfirm(e) {
      console.log("点击了确认")
      this.triggerEvent('onclickcomfirm')
    }
  },

});

<view clase="modal" wx:if="{
   
   {showModal}}">
  <view class="mask" bind:tap="onClickMask">
    <view class="dialog">
      <view class="title">提示</view>
      <view class="content">请确认支付1869.00元</view>
      <view class="btn">
        <view class="cancel" data-cancel >取消</view>
        <view class="sure" data-comfirm >确认</view>
      </view>
    </view>
  </view>

</view>

wxss

.modal {
  position: relative;
  color: #F7F7F7;
  opacity: 0.96;
  z-index: 199;
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
}

/*通过固定位置fixed 来实现页面居中*/
/*.mask {*/
/*  !*height: 100%;*!*/
/*  !*width: 750rpx;*!*/
/*  !*position: fixed;*!*/
/*  !*top: 0;*!*/
/*  !*bottom: 0;*!*/
/*  !*left: 0;*!*/
/*  !*right: 0;*!*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  background-color: rgba(0, 0, 0, 0.2);*/
/*}*/

.mask {
  width: 100%;
  height: 100%;
  z-index: 198;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  /*background-color: #bfc;*/
}

.dialog {
  width: 600rpx;
  height: 320rpx;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #fff;
  border-radius: 20rpx;
}

.btn {
  height: 100rpx;
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  border-top: 1rpx solid #eee;
}

.title {
  width: 100%;
  font-size: 38rpx;
  padding: 28rpx 0 10rpx;
  font-weight: 700;
  text-align: center;
}

.content {
  height: 120rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  overflow: hidden;
  padding: 18rpx 28rpx;
  color: #333333;
  text-align: center;
}

.cancel, .sure {
  line-height: 100rpx;
  box-sizing: border-box;
  width: 50%;
  font-weight: 600;
  font-size: 36rpx;
  text-align: center;
  border-right: 1rpx solid #eee;
}

.cancel {
  color: #959595;
}

.sure {
  color: #F15D21;
}

 Run: Click the cancel button, and click the confirm button to print normally, and the page that calls the component receives the event log:

>>Clicked cancel
 [sm]:7 to cancel the payment

Click Confirm
 [sm]: 11 >>Confirm payment