微信小程序使用Typescript开发中input的传值问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序使用Typescript开发中input的传值问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

刚刚接触typescript+TDesign(微信小程序) 组件，这里解决了一个写表单然后传值的问题。

wxml界面

  <block wx:for="{{items}}" wx:key="items" style="z-index:1;">
  	<t-input wx:if="{{item.lx=='phone'}}" 
  		data-index="{{index}}" 
  		value="{{item.value?item.value:''}}" 
  		tips="{{item.phoneVerify ? '':'手机号输入不正确'}}" 
  		bindchange="inputChangeData" 
  		type="number" label="{{item.title+' : '}}" 
  		placeholder="请输入..." />
 </block>

index->指向items的下标
value->input控件中显示的值
tips->t-input组件用于提示的内容，这里显示手机号码是否正确
bindchange->绑定数据改变的函数，用于刷新数据
number->让控件只能输入数字，带小数点是digit
label-> 前缀标题
placeholder->提示内容

这里是循环读取json,格式如下(仅供参考)
items结构：[ {
id: 7,
zd: ‘phone’,
title: ‘联系方式’,
lx: ‘phone’,
value: “”,
phoneVerify:true
}]

导入组件

{
 "usingComponents": {
   "t-demo": "./components/demo-block/index",
        "t-button": "tdesign-miniprogram/button/button",
        "t-icon": "tdesign-miniprogram/icon/icon",
        "t-input": "tdesign-miniprogram/input/input"
        "t-cell": "tdesign-miniprogram/cell/cell",
        "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
        "t-picker": "tdesign-miniprogram/picker/picker",
        "t-picker-item": "tdesign-miniprogram/picker-item/picker-item",
        "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
    }
}

传值处理过程

主要是引入TDesign中的组件,至于包，可以直接用TDesign模板去开发。

//这里主要是input数据改变的时候触发的函数
inputChangeData(e) {
			//控件中输入的值，每一次更新都会调用此方法。
        let value = e.detail.value,
        //在block循环中的下表，用于找到对应的项。
            index = e.target.dataset.index;
        console.log("inputChangeData", e.detail.value, index);
        //这里是一种赋值方式，命名一个items,并且找到this.data中的items,赋值给他。
        const { items} = this.data;
        items[index].value = value;
//这里是一个简答验证手机号的正则。
        if (items[index].lx == "phone") {
            const isPhoneNumber = /^[1][3,4,5,7,8,9][0-9]{9}$/.test(value);
                items[index].phoneVerify=isPhoneNumber;
        } else {//当字段为其他类型的时候。

        }
        //更新界面
        this.setData({
            items: items
        })
    },