时间戳

首页 > 解决方案 > 在 react-native-material-textfield 中检测粘贴事件

javascript - 在 react-native-material-textfield 中检测粘贴事件

问题描述

我想粘贴到 中react-native-material-textfield，但是根据粘贴的内容做一些事情（即，如果粘贴的内容是链接，则相应地设置它的样式）。但是，为了做到这一点，我需要知道何时将某些内容粘贴到OutlinedTextField. 我不确定如何收听粘贴事件。剪贴板在这里并没有真正的帮助，因为它所做的一切都是set/get内容，而不是告诉我是否粘贴了一些任意内容。

最小的示例代码

import Clipboard from '@react-native-community/clipboard';
import {
  OutlinedTextField,
} from 'react-native-material-textfield';

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}>
        <OutlinedTextField
                ref={this.ac_bankRef}
                keyboardType='numeric'
                autoCapitalize='none'
                autoCorrect={false}
                enablesReturnKeyAutomatically={false}
                onChangeText={this.handleOnChangeText} 
                 returnKeyType='done'
                label='Bank(2)*'
                
                maxLength={2}
                inputContainerStyle={{height:height>800?48:40,marginTop:10}}
                contentInset={{label:1,input:12}}
                baseColor={'#D4D4D4'}
                lineWidth = {1}              
/>
      </View>
    );
  }
}

在上面的示例代码const isPasted = content.includes(copiedContent);中，使用时总是返回 false，OutlinedTextField但在TextInputreact native 的正常情况下它工作正常。

请帮我解决问题。谢谢

标签： javascriptreact-nativetextfieldclipboard

解决方案

我已通过删除maxLength={2}. OutlinedTextField 删除属性后，我能够检测到复制粘贴事件。

推荐阅读