4. Ant Design PC UI组件 Input输入框事件 快速上手教程

教程目标

掌握Input输入框事件的使用,学会获取和设置输入框值

demo预览地址 https://pre.d8dcloud.com/play/595

组件清单如下图

运行效果

 教程步骤

右键点击输入框组件,事件

 选择输入框事件,这里我们添加 一个 输入改变事件,和一个失焦事件

 

添加丙个分组组件,整理一下组件树

 将JS函数放一组,UI相关组件放一组

添加两个JS函数,一个命名为 输入改变事件处理,另一个命名为 失焦事件处理

 在输入改变事件处理函数中,AI逻辑语句中填入  控制台调试输出 "输入改变事件处理",点击预览代码,AI将自动生成出JS代码

console.log("输入改变事件处理"); // 输出 "输入改变事件处理" 到控制台调试窗口

在失焦事件处理函数中,AI逻辑语句中填入  控制台调试输出 "失焦事件处理",点击预览代码,AI将自动生成出JS代码 

// 打印输出
console.log("失焦事件处理");

点击生成代码,将AI代码同步到JS代码中

右键点击 输入改变事件处理函数,复制 开发标识,粘贴到 输入框 输入改变事件方法中

右键点击 失焦事件处理函数,复制 开发标识,粘贴到 输入框 失焦事件方法中

 

 点击预览,打开开发工具 -> 控制台, 文本框里随意输入, 控制台中将打印出调试信息

完成

demo下载地址 https://www.d8dcloud.com/#/app

 

   多八多IDE注册使用地址 

https://www.d8dcloud.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值