微信小程序笔记 表单用自定义的input组件(把input写入组件中)

news/2024/7/7 9:04:44

参考了这篇文章。

示例:
一、自定义组件:myInput
myInput.wxml:

<input placeholder="{{myPlaceHolder}}" bindinput="getInputValue"></input>

myInput.wxss:

input{
  border: 1px solid #000;
}

myInput.js:

Component({
  behaviors: ['wx://form-field'], //必须要写
  properties: {
    myPlaceHolder:{
      type:String,
      value:""
    }
  },

  data: {

  },

  methods: {
    getInputValue: function(res) { //必须要写
      this.setData({
        value: res.detail.value
      })
    }
  }
})

二、表单使用自定义组件myInput
wxml:

<form bindsubmit="submitData">
  <myInput name="buyerID" myPlaceHolder="请输入买家id"></myInput>
  <myInput name="buyerPhone" myPlaceHolder="请输入买家电话"></myInput>
  <myInput name="buyerName" myPlaceHolder="请输入买家名称"></myInput>

  <button type="primary" form-type="submit">提交数据</button>
  <button type="primary" form-type="reset">清空</button>
</form>

要注意,不用在自定义组件myInput里定义name属性,直接在使用myInput的时候添加上name属性。

wxss:

page{
  padding: 10rpx;
  box-sizing: border-box;
}

js:

const db = wx.cloud.database()

Page({
  data: {
    
  },

  // 提交数据
  submitData:function(res){
    console.log(res)
  }
})

json:

{
  "usingComponents": {
    "myInput":"../../components/myInput/myInput"
  }
}

前端效果图:
在这里插入图片描述
提交数据:
在这里插入图片描述
后端运行结果:
在这里插入图片描述
返回的res.detail.value中就有刚刚提交的数据了。

但如果表单用自定义的button组件(把button写入组件中),好像不能提交:来源
在这里插入图片描述


http://www.niftyadmin.cn/n/3060243.html

相关文章

HDG 深圳站:开发者走上台前,收官之战侧重应用创新

文/华为开发者社区 12 月 24 日平安夜&#xff0c;等不到初雪的深圳下了一场淅淅沥沥的小雨。褪去了平日喧闹的深圳湾软件产业基地&#xff0c;沉浸在红色的节日气氛里。这一天&#xff0c;除了平安夜&#xff0c;也是 “HDG 华为开发者汇”本年度的收官之夜&#xff0c;为此华…

磁盘存储空间

今天将磁盘里的文件备份好后&#xff0c;准备重装系统。 在重装系统之前&#xff0c;反正磁盘都要被格式化&#xff0c;倒不如先研究一下磁盘。 &#xff08;在想起写这篇博客之前&#xff0c;我已经删除了磁盘上大部分的文件夹了&#xff09; 一、磁盘概况 我研究的是磁盘0&…

TensorFlow笔记 安装

安装过程很曲折 首先&#xff0c;Python必须是3.5-3.7版本的&#xff1a; 具体见TensorFlow官网 而现在的Anaconda的Python是3.8版本的&#xff1a; 这可能是我之前下载TensorFlow库一直失败的原因之一。&#xff08;看官方网站/文档很重要&#xff01;&#xff09; 所以&am…

Elasticsearch 索引的映射配置详解

2019独角兽企业重金招聘Python工程师标准>>> 概述 Elasticsearch 与传统的 SQL数据库的一个明显的不同点是&#xff0c;Elasticsearch 是一个 非结构化 的数据库&#xff0c;或者说是一个 无模式 的数据库。Elasticsearch 中数据最重要的三要素当属&#xff1a;索引…

TensorFlow笔记 基础

数据类型 设备 有些数据类型不能在gpu中创建&#xff1a; 维度 Tensor转化为numpy 判断是否为Tensor 方法一&#xff1a;is_tensor 方法二&#xff1a;isinstance dtype numpy转化为Tensor dtype的转化 变量Variable

聊聊代码提交那些事

文/庄表伟 华为公司内源社区平台架构师&#xff1b;开源社理事 1997 年毕业于华东师范大学&#xff0c;曾任盛大创新院的高级研究员、印客网的技术总监。多年来一直在编程的第一线&#xff0c;并以 Coding 为最大的乐趣。著有一本电子书《开源思索集》&#xff0c;在豆瓣、简书…

TensorFlow笔记 创建Tensor

numpy转化为Tensor list转化Tensor zeros ones 同zeros fill 填充为相同的值 random 随机初始化 正态分布 均匀分布

开源库架构实战——从0到1搭建属于你自己的开源库

需求分析 最近在 H5 开发与 APP 客户端工程师的联调过程中&#xff0c; 经常需要实现一些常用的移动端事件封装成接口提供给客户端&#xff0c;例如用户的单击 tap 事件、双击事件、长按事件以及拖动事件。但由于浏览器默认只提供了 touchstart、touchmove、touchend 三个原生事…