TextInput 输入框超过50个字符，给予提示，不允许超过50个字符，目前我是这样实现的，但是会导致文本闪烁一下，应该是渲染太频繁了，HarmonyOS 鸿蒙Next最好怎么解决？

TextInput 输入框超过50个字符，给予提示，不允许超过50个字符，目前我是这样实现的，但是会导致文本闪烁一下，应该是渲染太频繁了，HarmonyOS 鸿蒙Next最好怎么解决？

TextInput({
    placeholder: this.placeholder,
    controller: this.textInputController,
    text: $$this.keywords //注入变量
})
.defaultFocus(true)
.onChange((text) => {
    if (text?.length > this.maxWordLength) {
        this.keywords = text.slice(0, 50)
        showToastCenter('最多输入50字')
        return;
    }
    this.keywords = text;
})

更多关于TextInput 输入框超过50个字符，给予提示，不允许超过50个字符，目前我是这样实现的，但是会导致文本闪烁一下，应该是渲染太频繁了，HarmonyOS 鸿蒙Next最好怎么解决？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

采用函数防抖解决onChange多次触发问题，思路如下：

  1. 连续事件执行时：

    • 通过clearTimeout来取消还未达到执行时间的代码
    • 通过setTimout来控制事件内代码延迟一定时间后再执行

  2. 连续事件停止后：

    • 一段时间内如果没有再次触发，就执行业务代码

代码参考以下

//延时器ID
timeID: number = -1
//延迟时间
delayTime: number = 1000

TextInput({
  // 
})
  .onChange((value, index) => {
    //函数防抖
    clearTimeout(this.timeID)
    this.timeID = setTimeout(async () => {
      //功能代码...
    }, this.delayTime)
  })

更多关于TextInput 输入框超过50个字符，给予提示，不允许超过50个字符，目前我是这样实现的，但是会导致文本闪烁一下，应该是渲染太频繁了，HarmonyOS 鸿蒙Next最好怎么解决？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这种确实不抖动，但是每次输入框里就会先多输入几个字，然后在显示成被截取的50个字，还是没有达到预期和android app一模一样的效果，他那个是实时的，始终是50个字符，不会多一下，也不会闪烁抖动。

TextInput().maxLength(50).showCounter(true)

超过50个字符会提示，不让输入，并实时提示当前输入多少字符。

他那个提示得用吐司的形式展示，UI也不显示那个当前输入了多少个字符。

在HarmonyOS鸿蒙Next中，可以通过优化输入事件的处理来避免文本闪烁问题。你可以使用TextInput组件的onChange事件来监听输入内容的变化，但不要在每次输入时直接更新状态。相反，可以通过debounce或throttle方法来减少状态更新的频率，从而降低渲染频率。例如，使用setTimeout延迟状态更新，确保只有在用户停止输入一段时间后才进行提示和限制操作。这样可以有效减少频繁渲染导致的闪烁问题。具体代码示例如下：

import { useState, useEffect } from '@huawei/hms-core';
import { TextInput } from '@huawei/hms-react-native';

const MyTextInput = () => {
  const [text, setText] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (text.length > 50) {
        setError('输入不能超过50个字符');
        setText(text.substring(0, 50));
      } else {
        setError('');
      }
    }, 300); // 延迟300毫秒处理输入

    return () => clearTimeout(timeoutId);
  }, [text]);

  return (
    <TextInput
      value={text}
      onChangeText={setText}
      placeholder="请输入"
    />
    {error && <Text style={{ color: 'red' }}>{error}</Text>}
  );
};

通过这种方式，可以减少频繁的状态更新，从而避免文本闪烁。

回到顶部