收藏
回答

js的function如何重复使用?

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

  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

不知道我的问题是不是足够清晰。谢谢大家的帮忙!
最后一次编辑于  2021-04-17
回答关注问题邀请回答
收藏

3 个回答

  • 大兵
    大兵
    2021-04-16

    关于报错:改成如下,其中 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

    }


    2021-04-16
    有用
    回复 2
    • zh
      zh
      2021-04-17
      谢谢你的详细回答!
      2021-04-17
      回复
    • zh
      zh
      2021-04-17
      我刚刚更新了上面的问题 如果有时间麻烦帮忙看看吧! 谢谢你!
      2021-04-17
      回复
  • 订阅happiness
    订阅happiness
    2021-04-16

    2021-04-16
    有用
    回复 3
    • 青团社
      青团社
      2021-04-16
      https://developers.weixin.qq.com/s/DPgfPBmv72pM
      2021-04-16
      回复
    • zh
      zh
      2021-04-17
      说实话很厉害!
      2021-04-17
      回复
    • zh
      zh
      2021-04-17
      我刚刚更新了上面的问题 如果有时间麻烦帮忙看看吧! 谢谢你!
      2021-04-17
      回复
  • 番茄炖地蛋
    番茄炖地蛋
    2021-04-15

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

    2021-04-15
    有用
    回复 1
    • zh
      zh
      2021-04-16
      试了一下你的方案,有改进。但是就像文中更新的地方一样。还是无法实现目标。 还是谢谢你的帮忙!
      2021-04-16
      回复
登录 后发表内容
问题标签