鸿蒙开发(六):事件,响应式数据

155 阅读4分钟

事件方法用于在组件声明末尾以链式调用的方式为组件绑定事件行为。各组件的支持的事件可查看 API 文档,除去每个组件的专有事件,还有各组件都支持的通用事件,通用事件也可通过 API 文档查看:

image.png

image.png

上一节我们做出了模仿百度的搜索页面,但实际上只是个样子货,没有任何功能,现在我们来一步一步完善它。首先我们想要获取TextInput中输入的内容,那么我们就得用到TextInput的事件方法onChange()。onChange()接收一个回调函数callback作为参数:

image.png

按住Ctrl键,鼠标放到onChange上,待鼠标变成手的形状后,左键点击onChange跳转到它的定义,我们可以看到callback的类型是EditableTextOnChangeCallback,以同样的方法跳转到EditableTextOnChangeCallback类型的定义,可以看到callback其实就是一个接收两个参数(value:string,previewText?:PreviewText)的函数,前者是输入框中的当前内容,后者是个可选参数,表示预览文本,通常情况下我们只需要接收和处理value即可:

image.png

image.png

我们既可以在结构体外定义一个函数,然后把函数名作为参数传给onChange(),点击下方工具窗口栏的Log选项卡,会弹出Log窗口。我们在文本输入框中输入内容,可以看到Log窗口中也同步打印了我们在callback函数中拼接的内容:

image.png

我们还可以在结构体内定义一个成员方法,然后用 this.方法名 作为参数传给onChange()。在Log窗口中右键clear all,清空窗口内容,我们重新在页面的文本输入框中输入内容,可以看到Log窗口中也同步打印了我们在callback2成员方法中拼接的内容:

image.png

当回调函数中的逻辑不多时,我们往往采用更为简便的箭头函数作为传递参数。箭头函数不需要定义函数名,且直接写在括号中:

image.png

现在我们已经可以获取到输入框中的内容了,我们还需要把获取到的内容保存起来,以便在之后点击搜索时使用。我们先在Index结构体内定义一个string类型的成员变量keyword,然后在Button组件的下方新增一个Text组件,用于显示我们想要搜索的关键字,看看是否能达到我们预期的效果。为了能专注于当前学习的内容,我们把上方的文本和图片都去掉:

image.png

现在我们不需要在Log窗口中把输入框中内容的每一次更新都打印出来了,但是我们想把内容保存到keyword中,所以我们修改一下onChange()中的代码:

image.png

我们通过.onClick()事件方法给Button组件增加一个点击事件,当我们点击搜索按钮时,Log窗口能够把我们搜索的内容给打印出来:

image.png

现在,让我们来试一试,在输入框中输入想要搜索的内容"HarmonyOS",然后点击搜索按钮,观察Log窗口,确实输出了我们拼接好的字符串。但是细心的小伙伴会发现,按钮下方的Text组件中的内容却没有发生变化:

image.png

这是因为Text组件创建后就已经被渲染到界面上了,而我们用于拼接内容的keyword变量并不是一个响应式数据,更新时并不会触发组件的重新渲染,换句话说,就是组件并不知道keyword发生变化了。那怎么才能让它知道呢?解决方法很简单,就是我们上面所说的“响应式数据”。所谓的响应式数据,就是当数据发生变化时,所有在配置项或属性方法里面用到该数据的组件,会自动响应进行重新渲染。我们使用@State装饰器,把keyword变成一个响应式数据:

image.png

保存代码后我们再次在输入框中输入HarmonyOS,就会发现下方的文本框已经能即时显示我们想要搜索的内容了:

image.png