Javascript 在react本机文本输入中检测粘贴事件

我想粘贴到react原生输入中，但要根据粘贴的内容执行某些操作（即，如果粘贴的内容是链接，则相应地设置其样式）。然而，为了做到这一点，我需要知道什么时候有东西被粘贴到文本输入中。我不知道如何收听粘贴事件。剪贴板在这里没有真正的帮助，因为它所做的只是设置/获取内容，而不是告诉我是否粘贴了一些任意内容

您可以将输入的两个副本保留为状态，其中一个副本为输入的前一个状态，另一个副本为当前输入的状态。例子是

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, "")

---

然后你可以使用regex来查看它是否是一个链接，并相应地对其进行样式化。

对于那些从谷歌上看到这篇文章的人来说，他们没有发现像我这样幸运的人，幸运的是，我找到了解决方案，尽管并不理想，因为它使用了

onChangeText

事件

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

最小样本代码

导出默认类App扩展React.Component{
handleOnPaste=（内容）=>{
警报（'检测到粘贴！内容：'.concat（内容））；
}
handleOnChangeText=异步（内容）=>{
如果（内容==''）返回；
const copiedContent=await Clipboard.getString（）；
如果（copiedContent==''）返回；
const isPasted=content.includes（复制内容）；
如果（已粘贴）此文件，请粘贴（内容）；
}
render（）{
返回(
);
}
}

这是最新的，享受吧

---

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

import React，{useffect，useRef，useState}来自“React”
从“@react native community/Clipboard”导入剪贴板；
从“react native”导入{View Text，TextInput}
导出默认常量ScreenToPastIn=（）=>{
常量[pastContent，setPastContent]=useState（“”）
useffect（（）=>{
AppState.addEventListener（'change'，handleAppStateChange）；
return（）=>{
AppState.removeEventListener（'change'，handleAppStateChange）；
};
}, []);
const handleAppStateChange=（nextapstate）=>{
如果（nextapstate==“活动”）
{
剪贴板.getString（）。然后（（内容）=>{
如果（内容和内容长度>0）
{
setPastContent（内容）
}
}).catch（e=>{
setError（'错误代码'）
})
}
};
返回
{pastContent}
}

为什么不监听更改事件？我监听onChangeText，但这并没有真正的帮助。为什么不监听

粘贴

？react native中没有对该剪贴板的访问权限，提供的是对本机ios剪贴板的抽象。我将编辑我的语句，然后，我计算应用了常规事件。每次文本输入值更改时，您的代码都会发出警报。它不检测粘贴事件。@Rubek Joshi是的，不幸的是，这是一个肮脏的解决方法，因为没有本机事件来检测粘贴。但它不会像你说的那样每次都发出警报，只有当内容剪贴板相同时才会发出警报。我将更新答案以避免混淆。

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>
}