刚刚接触typescript ,而且在微信开发中使用了TDesign 组件,然后就开始各种茫然了。
耗在有demo.
这里解决了一个写表单然后传值的问题。
上代码 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->让控件只能输入数字
label-> 前缀
placeholder->提示内容

这里是循环读取表单的字段,然后进行组织表单的操作。这里写的是其中的“联系方式一栏”
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中的组件,我没有使用npm,所以直接把包打过来了。(电脑过于陈旧。)

//这里主要是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
        })
    },

文章过于简陋,主要解决和记录使用TDesign中input传值问题。
如有不正确的地方还请指正

06-19 19:37