Question

以下是我的代码 -

     contactNumberMask: function(value) {
       return value
     },

     componentDidMount: function() {
       this.params = {
          cellNumber: ''
       };
       var maskList =  $.masksSort($.masksLoad("http://cdn.rawgit.com/andr-04/inputmask-multi/master/data/phone-codes.json"), ['#'], /[0-9]|#/, "mask");
        this.maskOpts = {
          inputmask: {

             onMaskChange: function(maskObj, determined) {
                if (determined) {
                var number = this.contactNumberMask(maskObj.mask);
                this.params.cellNumber = number+'-'+this.params.cellNumber;
            }
        }
    };
},

在此我想在onMaskChange（）函数中调用this.contactNumberMask（）函数。但它没有得到参考。

Answer 1

有一些方法可以做。例如，将此引用存储在变量中。

 contactNumberMask: function(value) {},
 componentDidMount: function() {
   var that = this;
   this.params = {
      cellNumber: ''
   };
   var maskList =  $.masksSort($.masksLoad("http://cdn.rawgit.com/andr-04/inputmask-multi/master/data/phone-codes.json"), ['#'], /[0-9]|#/, "mask");
   this.maskOpts = {
     inputmask: {
       onMaskChange: function(maskObj, determined) {
         if (determined) {
           var number = that.contactNumberMask(maskObj.mask);
           this.params.cellNumber = number+'-'+this.params.cellNumber;
         }
       }
    };
 },

Answer 2

使用bind()设置上下文

        onMaskChange: function(maskObj, determined) {
            if (determined) {
            var number = this.contactNumberMask(maskObj.mask);
            this.params.cellNumber = number+'-'+this.params.cellNumber;
        }.bind(this)

Answer 3

您有多种选择：

在componentDidMount函数
的开头创建一个变量self
var self = this

然后你使用self代替这个。

你也可以创建一个函数_onMaskChange，然后使用bind方法在这个方法中设置'this'

onMaskChange：_onMaskChange.bind（this，maskObj，确定）

Answer 4

您的function(maskObj, determined)块与周围的区块不具有相同的上下文（this）。那是因为 - 如果没有指定其他 - function块将创建自己的上下文（this）。该函数不是绑定到外部上下文。

以上多个答案都是一个选项。但我建议使用=>箭头函数语法。这将隐式 bind（）你的函数到外部上下文：

onMaskChange: (maskObj, determined) => {...}

它的语法也更清晰。

我想将父函数调用到包含在对象中的函数

4 个答案: