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