微信小程序獲取表單數據

學習小程序中，編輯頁需要獲取表單控件數據，獲取方式有兩種：

1.表單中的控件

2.非表單中的控件

 

 

項目中，需要修改完畢后，自動給 this.setData 賦值。每個頁面中每個控件都些個單獨的 handler 非常麻煩，代碼維護難。

我就想想是否可以整理成一個公共方法，涉及到幾個點：

1.如何動態取 this.data 中的值

2.如何動態設置 this.data 中的值

3.單選組和多選組的數據項如何動態讀取、設置，怎么設置選中等

 

 

下面我整理了一些非表單中控件代碼示例，大家看看

1.input 

wxml 中

 <input id="entity.FullName"  bindinput="handleInputChange"  value="{{entity.FullName}}" placeholder="請輸入姓名" />

js 中

 // input輸入框的值
  handleInputChange(event) {
    const inputVal = event.detail.value;
    const inputId = event.target.id; 
    this.setData({
        [`${inputId}`]: inputVal
    });
  }

 

event.target.id 獲取的是 input 的 id

event.target.value 獲取的是 input 的值

 

this.setData({

　　[`${inputId}`]:inputVal

}); 動態設置 this.data.entity.FullName 屬性。

注意：inputId 取得是<input id="entity.FullName" 的  “entity.FullName”

Page({
    data: {
        entity:{
            FullName:'張三'
        }
    }
});    

　　

 

2.radio

<view class="line">
            <view class="title">性別：</view>
            <view class="input">
                <radio-group id="entity.Gender" data-itemname="genderItems" wx:for="{{genderItems}}" wx:key="value"  bindchange="handleRadio">
                    <label><radio value="{{item.value}}"  checked="{{item.checked}}" style='zoom:.6;'/>{{item.name}}</label>
                </radio-group>
            </view>
        </view>

 

// 觸發readio
  handleRadio(event) {
    console.log(event);

    const inputVal = event.detail.value;
    const inputId = event.target.id; 
    this.setData({
        [`${inputId}`]: inputVal,
    });
    
    var itemname = event.currentTarget.dataset["itemname"];
    var valuename = event.currentTarget.dataset["valuename"];

    if(itemname == null || itemname=="")
    {
        return;
    }

    var items = this.data[`${ itemname }`];

    if(items!=null && items.length>0)
    {
        if(valuename == null || valuename =="")
        {
            //設置下默認 value 的名稱
            valuename = "value";
        }
       
        for (let i = 0, len = items.length; i < len; ++i) {
            items[i].checked = items[i][`${valuename}`] === inputVal;
        }

        this.setData({
            [`${itemname}`]: items
        });
    }
  }

　　

注意：

<radio-group id="entity.Gender" data-itemname="genderItems"   中的 “genderItems” 是 this.data.genderItems 下拉項內容

 

 data: {
        paras:{},
        genderItems:[
            {value: 'M', name: '男' ,checked:false},
            {value: 'F', name: '女' ,checked:false}
        ]
    }

 

　　

 

3.Switch

 

<switch  id="entity.Active" bindchange="handleSwitch" checked="{{entity.Active}}" style='zoom:.6;' />

 

　　

  // switch中的值
  handleSwitch(event) {
    const inputVal = event.detail.value;
    const inputId = event.target.id; 
    this.setData({
        [`${inputId}`]: inputVal,
    });
  }

　

4.Silder

<slider id="entity.Per" bindchange="handleSlideChange" value="100"  min="50" max="200" show-value/>

　　

const inputVal = event.detail.value;
    const inputId = event.target.id; 
    this.setData({
        [`${inputId}`]: inputVal,
    });