HarmonyOS 鸿蒙Next TextInput 设置默认输入文本时异常触发 onChange

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next TextInput 设置默认输入文本时异常触发 onChange

@Entry
@Component
struct Index {
    private itemEdited: boolean = false;

    build() {
        Column() {
            TextInput({ text: '默认文本' })
                .onChange(() => {
                    this.itemEdited = true; 
                    console.log('Input changed');
                })
        }
    }

    aboutToAppear() {
        console.log('About to appear');
        this.itemEdited = false;
    }
    
    onPageShow() {
        console.log('Page appear');
        this.itemEdited = false;
    }
}

如上述代码所示，编写过程中发现如果为 TextInput 设置默认文本（而不是留空让用户输入），会触发 onChange 事件调用关联的函数。

并且这个 onChange 事件触发的位置十分奇怪，会在 aboutToAppear() 和 onPageShow() 之后触发，以至于我没办法在后两个事件中将 this.itemEdited 改回 false。

11-06 21:47:37.867 32396-12308 A0c0d0/JSAPP I About to appear
11-06 21:47:37.868 32396-12308 A0c0d0/JSAPP I Page appear
11-06 21:47:38.099 32396-12308 A0c0d0/JSAPP I Input changed

该如何避免这个问题？


更多关于HarmonyOS 鸿蒙Next TextInput 设置默认输入文本时异常触发 onChange的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
10 回复

onchange，默认值也是有变化，必然会触发该事件。

然后你说的 aboutToAppear() 和 onPageShow() 先执行，这个你可以看一下生命周期，页面渲染就会执行该方法，所以在onchage前面，一点都不奇怪，当前的现象本身没有任何问题，你这种情况下应该试着修改你的代码逻辑

更多关于HarmonyOS 鸿蒙Next TextInput 设置默认输入文本时异常触发 onChange的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


那有什么别的办法吗，我确实是想不到怎么解决了。

期待HarmonyOS能在未来推出更多针对企业用户的解决方案。

onchange里加一个if判断一下 非默认值的时候走下面逻辑。是默认值不会修改itemEdited ，依然为false，

嗯，看来只能这样了，谢谢，

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-textinput-V5#textinputoptions对象说明

可以参考文档中关于 text 的说明。

文档里面没提 onChange 会在设置初始值时触发啊，

默认值用变量存储。

@State txt:string='默认文本'

TextInput({ text: this.txt })

一样的，我用 @Link @State 都试过了，

针对HarmonyOS（鸿蒙）Next TextInput设置默认输入文本时异常触发onChange的问题，这通常是由于TextInput组件在初始化或设置默认值时触发了不必要的状态更新或回调。

在鸿蒙系统中，TextInput组件的onChange事件通常用于监听用户输入文本的变化。当尝试在组件初始化时设置默认文本时，如果处理不当，可能会错误地触发onChange事件。

要解决这个问题，可以考虑以下几种方法（但请注意，由于不能直接提供代码或具体实现，以下仅为思路性建议）：

  1. 延迟设置默认值：尝试在TextInput组件渲染后，通过异步方式（如setTimeout）设置默认值，以避免在初始化阶段触发onChange。

  2. 检查onChange触发条件：确保onChange事件的触发逻辑正确，仅当用户实际输入文本时才触发，而非在组件内部状态更新时。

  3. 使用组件状态管理：利用鸿蒙的状态管理机制（如数据绑定），确保在组件状态更新时能够正确控制onChange的触发。

  4. 查阅官方文档：确认是否有关于TextInput组件设置默认值时的特殊说明或推荐实践。

如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部