HarmonyOS 鸿蒙Next中疑似TextInput组件onBlur()事件的BUG
HarmonyOS 鸿蒙Next中疑似TextInput组件onBlur()事件的BUG 先上效果GIF
我做的是一个打字软件,当用户一个字一个字输入时,能正确触发TextInput组件的onBlur()事件。当用户在输入法中预上屏输入了多个字,然后输入到TextInput中时,我做了一个逻辑判断,让它比对后N个字的正确答案,如果用户输入的字符串和后N个字能对得上,那么输入框焦点跳到当前往后第N个输入框 ,并回填正确的字符串进每一个单独的Input框中(吐槽一下这个功能实现起来不容易,至少我的是ComponentV1版本,没有像Vue那样通过Ref找到每个子组件的引用然后修改里面的值)。我是通过创建一个inputValues:Array<string>管理所有输入字符的状态,将每个输入的值加入到这个数组中,然后将每个TextInput的text属性跟inputValues内的元素绑定,然后用handleInputChange(在父组件中)方法,通过子组件的回调事件通知父组件重新生成一遍inputValues(仅改变要变化的值),来触发UI的响应式更新,这和Vue早期版本的诟病很像,text不能直接绑定数组中的某个对应的元素的值,非要曲线救国很不优雅。我上图大家就应该理解了:
这样每个Input框的值能动态响应的问题解决了。但是重点来了,我发现Input的onBlur()方法好像出Bug了。我 的方法是这样写的:
意思就是当输入框失去焦点时,使得输入框边框的颜色变成透明色。控制焦点我是用上图的focusControl来实现的。然后就出现了开头视频中的:单个字输入能正确触发onBlur(),但是多个字输入就不行了。。。这是BUG吗,如果不是,能给出具体解决思路吗?求各路大神指点!
更多关于HarmonyOS 鸿蒙Next中疑似TextInput组件onBlur()事件的BUG的实战教程也可以访问 https://www.itying.com/category-93-b0.html
问题虽然解决了。解决方法是在TextInput组件的onChange()时间里面给输入正确的代码段(每次键入汉字时都会触发逻辑判断,当输入的值等于正确的值就进入该“输入正确”的代码段)里再加上this.currentColor = Color.Transparent 这样的语句强制触发UI重新渲染。 虽然只加了一行代码就解决问题了。但是我还觉得onBlur()事件没被触发是个BUG,可能涉及底层代码的执行顺序问题。工单我也提交了,看官方怎么回复吧。
更多关于HarmonyOS 鸿蒙Next中疑似TextInput组件onBlur()事件的BUG的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
根据描述,TextInput组件的onBlur事件在单字输入时正常触发,但多字预输入后无法触发,可能是由于焦点切换逻辑与状态更新时序冲突导致。建议检查以下两点:
-
焦点控制与状态更新的时序:在批量回填字符串并切换焦点时,确保
focusControl
的更新发生在UI渲染完成之后。可尝试使用setTimeout
或nextTick
机制延迟焦点切换,避免因状态更新尚未完成而干扰事件触发。 -
事件冒泡与阻止默认行为:多字输入可能涉及输入法组件的内部事件处理,确认是否因事件冒泡被拦截。可尝试在
onBlur
回调中显式调用e.stopPropagation()
,或检查输入法是否阻止了默认的失焦行为。
若问题仍存在,可能是框架层面的兼容性问题,建议提供最小化复现代码片段以便进一步排查。