通常使用的是input的綁定方法
bindinput="userInput"
綁定的方法如下,通過(guò)e攜帶的detail.value獲取用戶的輸入
userInput(e) {
this.setData({
name : e.detail.value,
})
}
|
e為該方法觸發(fā)返回節(jié)點(diǎn)攜帶的參數(shù),如果你想知道e是什么可以將起打印處理
1. console.log(e)
頁(yè)面input組件綁定獲取方法
<input class='name' bindinput="userInput" maxlength="3" value="{{name}}" placeholder="輸入商品的名稱"></input>
那么對(duì)于頁(yè)面很多的input,是否需要每一個(gè)輸入對(duì)應(yīng)一個(gè)方法呢?
其實(shí)只要一個(gè)就可以了,獲取對(duì)應(yīng)的參數(shù)和用戶的值即可
獲取值的方式是e.detail.value;
獲取參數(shù)的方式呢?其實(shí)可以給input攜帶參數(shù)id
<input class='name' bindinput="userInput"
id='name'
maxlength="3" value="{{name}}" placeholder="輸入商品的名稱"></input>
<input class='price' bindinput="userInput"
id='price'
maxlength="3" value="{{price}}" placeholder="輸入商品的價(jià)格"></input>
獲取節(jié)點(diǎn)對(duì)應(yīng)的id為 e.target.id
這時(shí)上面的方法可以寫成
userInput(e) {
let id = e.target.id;
this.setData({
[id] : e.detail.value,
})
}
|
或是這樣
userInput(e) {
this.setData({
[e.target.id] : e.detail.value,
})
}
|
這時(shí)同一個(gè)方法就可以分別獲取到商品的name和price輸入的值了
如果是要提交一個(gè)表單呢,所有參數(shù)都需要整個(gè)提交參數(shù)
這時(shí)提交時(shí)希望直接提交一個(gè)參數(shù),而不是要整合,可以把所有參數(shù)加到一個(gè)對(duì)象內(nèi)即可,那如何獲取呢?
this.setData({
'args.id': 290
})
|
通過(guò)上面的方式可以使data內(nèi)的args的屬性id的值為290
那么就可以改進(jìn)上面的方式獲取表單的值
<input class='name' bindinput="userInput" id='args.name' maxlength="3" value="{{args.name}}" placeholder="輸入商品的名稱"></input>
<input class='price' bindinput="userInput" id='args.price' maxlength="3" value="{{args.price}}" placeholder="輸入商品的價(jià)格"></input>
通過(guò)
userInput(e) {
this.setData({
[e.target.id] : e.detail.value,
})
}
|
獲取到用戶輸入的值直接存入args對(duì)象中
args : {
name: '金鑼',
price: '23.99'
}
|
可以通過(guò)控制臺(tái)查看參數(shù)變化
當(dāng)然
<textarea placeholder="輸入商品的名稱" maxlength="60" bindinput="userInput" id='args.name' value="{{args.name}}"> </textarea>
也適用