在 react-native 文本输入中检测粘贴事件答案

【问题标题】：Detect a paste event in a react-native text input在 react-native 文本输入中检测粘贴事件
【发布时间】：2016-09-07 14:59:11
【问题描述】：

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

【问题讨论】：

为什么不监听更改事件？
我监听 onChangeText，但这并没有什么帮助。
为什么不听paste？ developer.mozilla.org/en-US/docs/Web/Events/paste
在 react-native 中无法访问该剪贴板，提供的是对原生 ios 剪贴板的抽象。
我会编辑我的声明，我认为应用了常规事件。

标签： javascript ios react-native

【解决方案1】：

对于那些从 Google 看到这篇帖子但没有像我一样运气的人，幸运的是，我找到了解决方案，虽然 并不理想，因为它使用了 onChangeText 事件。

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

最少的示例代码

export default class App extends React.Component {
  handleOnPaste = (content) => {
    alert('paste detected! content: '.concat(content));
  }

  handleOnChangeText = async (content) => {
    if (content === '') return;
    const copiedContent = await Clipboard.getString();
    
    if (copiedContent === '') return;
    const isPasted = content.includes(copiedContent);
    if (isPasted) this.handleOnPaste(content);
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput 
          placeholder={'fill something'} 
          style={styles.input} 
          onChangeText={this.handleOnChangeText} 
        />
      </View>
    );
  }
}

这里是snack expo，享受吧！

【讨论】：

每次文本输入值发生变化时，您的代码都会发出警报。它确实不检测粘贴事件。
@Rubek Joshi 是的，不幸的是，这是一个肮脏的解决方法，因为没有检测粘贴的本机事件。但它不会像你说的那样每次都提醒，只有当内容剪贴板相同时。我会更新答案以避免混淆。
对于非常基本的使用来说是个不错的主意，但我怀疑这会适得其反，因为新的 API 会检测应用剪贴板读取。 Apple 现在希望在您的应用每次读取剪贴板时通知用户。您的用户可能会变得偏执离开评论：“为什么这个间谍软件应用程序会在我尝试做任何事情的时候检查我的剪贴板？”

【解决方案2】：

您可以在 state 中保留 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, "")

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

【讨论】：

【解决方案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>
}

【讨论】：