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

Question

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

Answer 1

对于那些从谷歌看到这篇文章的人，并没有像我一样运气好，幸运的是，我找到了解决方案，虽然并不理想，因为它使用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>
    );
  }
}

这里是小吃博览会，享受！

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

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