React Native - Pressable longpress 上的连续文本输入删除

Posted 2023-02-27

【中文标题】React Native - Pressable longpress 上的连续文本输入删除

【英文标题】：React Native - Continuous textinput delete on Pressable longpress

【发布时间】：2021-11-17 00:55:39

【问题描述】：

当我尝试使用 Pressable 进行 onLongPress 时，我有点担心。 与之关联的函数只被调用一次。

当我按住可按下时，如何让它连续删除 textInput 上的值？

示例代码：

<Pressable
              style=( pressed ) => [
                styles.deleteStyle,
                
                  opacity: pressed
                    ? 0.5
                    : 1,
                ]
              onPress=() =>  delDigit() 
              onLongPress=() =>  delDigit() 
            >
              <Icon style=[ color: '#FD6B89' ] name="backspace" size=30 />
            </Pressable>

提前致谢！

【参考方案1】：

一个非常简单的解决方案是在按住 Pressable 按钮时调用 onLongPress 函数时使用 setInterval 函数。您可以使用 clearInterval 停止从 textInput 中删除文本。

步骤：

a) 在调用 onLongPress 函数时在 Pressable 上调用 setInterval 函数，并在每个间隔中从 textInput 中删除值字符串的最后一个元素。

onLongPress=() => 
   this.timer = setInterval(() => 
      this.setState(
          email: this.state.email.substring(0,this.state.email.length - 1)
      )
   ,200)

b) 在调用 onPressOut 函数时，在 Pressable 上调用 clearInterval 函数来清除 onLongPress

中声明的 timerInterval

    onPressOut=() => 
      clearInterval(this.timer)
    

以下是针对您的问题的完整解决方案/示例： https://snack.expo.dev/@gavindmello97/pressable-deletion

希望对您有所帮助。如果是这样，请将我的答案标记为正确答案，以便其他人也可以从中受益。 如果您对我的代码有任何问题，请给我留言/评论。很高兴为您提供帮助。

【讨论】：

谢谢...虽然我没有使用这个 pers，但你让我知道如何解决我的问题！非常感谢！！！！！！