微信小程序input獲取輸入,如何獲取參數
通常使用的是input的綁定方法
bindinput="userInput"
綁定的方法如下,通過e攜帶的detail.value獲取用戶的輸入
1. userInput(e) {
2. this.setData({
3. name : e.detail.value,
4. })
5. }
e為該方法觸發返回節點攜帶的參數,如果你想知道e是什么可以將起打印處理
1. console.log(e)
頁面input組件綁定獲取方法
<input class='name' bindinput="userInput" maxlength="3" value="{{name}}" placeholder="輸入商品的名稱"></input>
那么對于頁面很多的input,是否需要每一個輸入對應一個方法呢?
其實只要一個就可以了,獲取對應的參數和用戶的值即可
獲取值的方式是e.detail.value;
獲取參數的方式呢?其實可以給input攜帶參數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="輸入商品的價格"></input>
獲取節點對應的id為 e.target.id
這時上面的方法可以寫成
1. userInput(e) {
2. let id = e.target.id;
3. this.setData({
4. [id] : e.detail.value,
5. })
6. }
或是這樣
1. userInput(e) {
2. this.setData({
3. [e.target.id] : e.detail.value,
4. })
5. }
這時同一個方法就可以分別獲取到商品的name和price輸入的值了
如果是要提交一個表單呢,所有參數都需要整個提交參數
這時提交時希望直接提交一個參數,而不是要整合,可以把所有參數加到一個對象內即可,那如何獲取呢?
1. this.setData({
2. 'args.id': 290
3. })
通過上面的方式可以使data內的args的屬性id的值為290
那么就可以改進上面的方式獲取表單的值
<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="輸入商品的價格"></input>
通過
1. userInput(e) {
2. this.setData({
3. [e.target.id] : e.detail.value,
4. })
5. }
獲取到用戶輸入的值直接存入args對象中
1. args : {
2. name: '金鑼',
3. price: '23.99'
4. }
可以通過控制臺查看參數變化
當然
<textarea placeholder="輸入商品的名稱" maxlength="60" bindinput="userInput" id='args.name' value="{{args.name}}"> </textarea>
也適用
如果您的問題還未解決可以聯系站長付費協助。

有問題可以加入技術QQ群一起交流學習
本站vip會員 請加入無憂模板網 VIP群(50604020) PS:加入時備注用戶名或昵稱
普通注冊會員或訪客 請加入無憂模板網 技術交流群(50604130)
客服微信號:15898888535
聲明:本站所有文章資源內容,如無特殊說明或標注,均為采集網絡資源。如若內容侵犯了原著者的合法權益,可聯系站長刪除。