首先感谢你们点进来看。我的问题如下
- 有多个input的组建,每个都有一个bindinput的
- 因为每一个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
不知道我的问题是不是足够清晰。谢谢大家的帮忙!
关于报错:改成如下,其中 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传过去就好了啊