js的function如何重复使用?
发布于 5 年前 作者 dmao 13374 次浏览 来自 问答

首先感谢你们点进来看。我的问题如下

  1. 有多个input的组建,每个都有一个bindinput的
  2. 因为每一个input都有bindinput,而且他们的功能都是类似的,目前的情况就是我有大量重复使用的字段。
Page({
  data: {
    inputValue1:'',
    inputValue2:'',
    inputValue3:'',
    inputValue4:'',
},
  input1: function (e) {
    if (Math.abs(e.detail.value.length - this.data.inputValue1.length) != 1) {
      this.setData({
        inputValue1: ''
      })
      return ''
    } else {
      let reg = /^[0-9]*$/
      if (!reg.test(e.detail.value)) {
        this.setData({
          inputValue1: ''
        })
        return ''
      } else {
        this.setData({
          inputValue1:e.detail.value
        })
      }
    }
  },
 input2: function (e) {
    if (Math.abs(e.detail.value.length - this.data.inputValue2.length) != 1) {
      this.setData({
        inputValue2: ''
      })
      return ''
    } else {
      let reg = /^[0-9]*$/
      if (!reg.test(e.detail.value)) {
        this.setData({
          inputValue2: ''
        })
        return ''
      } else {
        this.setData({
          inputValue2:e.detail.value
        })
      }
    }
  },
})

如上述所见,每一个input的function其实只是改了inputValue1或inputValue2。所以我就想说能不能将他们集合到一个function里面。如下

 checkInput: function (inputValue) {
    if (Math.abs(e.detail.value.length - this.data.inputValue.length) != 1) {
      this.setData({
        inputValue: ''
      })
      return ''
    } else {
      let reg = /^[0-9]*$/
      if (!reg.test(e.detail.value)) {
        this.setData({
          inputValue: ''
        })
        return ''
      } else {
        this.setData({
          inputValue:e.detail.value
        })
      }
    }
  },

 input1: function (e) {
   this.checkInput(this.data.inputValue1)
 },
 input2: function (e) {
   this.checkInput(this.data.inputValue1)
 },

但是上述的这个情况却报错了,以下的这个错误

ReferenceError: e is not definedy

因为我也算是新手,所以如有不好的地方请大家多多包涵。在这里也希望大家能帮我看看哪里有问题。好让我缩短代码长度。

再次拜谢!


试了一下楼下提醒我的,代码还是报错了。

 input1: function (e) {
   this.checkInput(e, this.data.inputValue1)
 },
 input2: function (e) {
   this.checkInput(e, this.data.inputValue1)
 },

主要问题出在了这几个地方。

if (Math.abs(e.detail.value.length - this.data.inputValue.length) != 1) {
      this.setData({
        inputValue: ''
      })
这里第一行出现的是 this.data.inputValue.length
但是第三行出现的是 inputValue
如果我将第一行this.data.inputValue.length 换成 inputValue.length 代码就没有报错。 但是功能也实现不出来。

麻烦大家看看怎么解决比较好!辛苦大家了。


最后在网上找到我想要的目标答案。

  checkInput: function(e,input){
    let reg = /^[0-9]*\.?[0-9]*$/
    if (!reg.test(e.detail.value)) {
      this.setData({
        [input]: ''
      })
      return ''
    } else {
      this.setData({
        [input]:e.detail.value
      })
    }
  },

只要input在 this.setData 里面框住就好了
在这里我想引出我的第二个问题。 能不能像动态选择 this.setData的key一样,动态选择this.setData的value
就是说有没有方法能实现类似的功能
      this.setData({
        [input]: this.data.input //但是这个input可以像key一样随着调用的名字改变而改变
      })
      return this.data.input

例如如果我调用

  input1: function (e) {
    this.checkInput(e,'inputValue1')
  },

然而 上面的代码会实现
      this.setData({
        inputValue1: this.data.inputValue1
      })
      return this.data.inputValue1

不知道我的问题是不是足够清晰。谢谢大家的帮忙!
3 回复

关于报错:改成如下,其中 checkInput 只传一个参数就好 this.checkInput(e.detail.value)

if (Math.abs(inputValue.length - this.data.inputValue.length) != 1) {
      this.setData({
        inputValue: ''
      })
}

关于写法:

在xml 处加入用来区分是哪一个input的标识,例如:

<input data-flag=“1” bindinput=“input”/>

<input data-flag=“2” bindinput="input“/>

js处如下:其中 value 为输入的值,flag 为在xml中写入的data-flag中的值,用来判断是哪个input触发的方法

input(e){

const value = e.detail.value

const flag = e.target.dataset.flag

}

那就调用的时候,多加个参数,把e传过去就好了啊

回到顶部