检测反应原生文本输入中的粘贴事件

Question

我想粘贴到react本机输入中，但是根据粘贴的内容执行某些操作（即，如果粘贴的内容是链接，请相应地设置样式）。但是，为了做到这一点，我需要知道何时将某些内容粘贴到文本输入中。我不确定如何监听粘贴事件。剪贴板在这里并没有真正帮助，因为它只是设置/获取内容，而不是告诉我是否粘贴了一些任意内容。

Answer 1

幸运的是，对于那些从Google看过这篇帖子的人，没有找到像我这样的运气。

这个想法很简单，每次更改文本时，我都会将其与剪贴板中的内容进行比较。而已。

最小示例代码

stdin

这是snack expo，请尽情享受！

Answer 2

您可以将输入保持2个副本的状态，其中1个副本是输入的先前状态，另一个副本是当前输入的状态。例子是

Actual input: asd
this.state={copy_one: "as", copy_two: "asd"}

Actual input: asdgoogle.com
this.state={copy_one: "asd", copy_two: "asdgoogle.com"}

您可以通过进行更新

this.setState({copy_one: this.state.copy_two, copy_two: currentValue})

在onChange道具的每个触发器上。如果您正在寻找更改，那么快速而肮脏的破解方法只能通过替换来删除原始字符串

difference = this.state.copy_two.replace(this.state.copy_one, "")

然后，您可以使用正则表达式查看它是否是链接并相应地对其进行样式化。

Answer 3

为了检测过去的事件，在 react-native 中，我的解决方案基于应用程序状态工作。 因此，如果应用在后台，则意味着该应用处于非活动状态（用户可能正在复制） 否则它将处于非活动模式（这里我们可以检查用户是否进行了复制操作）。 请先添加此剪贴板模块from here

import React, {useEffect, useRef, useState} from 'react'
import Clipboard from '@react-native-community/clipboard';
import { View Text, TextInput} from "react-native"
export default const ScreenToPastIn = () => { 

const [pastContent,setPastContent] = useState('')

 useEffect(() => {
    AppState.addEventListener('change', handleAppStateChange);
    return () => {
        AppState.removeEventListener('change', handleAppStateChange);
    };
}, []);

  const handleAppStateChange = (nextAppState) => {
  
     if(nextAppState == 'active')
     {

         Clipboard.getString().then((content) => {
             if(content && content.length>0)
             {
                  
                 setPastContent(content)
             }

         }).catch(e=>{
             setError('incorrect code')
         })
     }

};
return <View>
<Text>{pastContent}</Text>
<TextInput value = {pastContent} ><TextInput>
</View>
}