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

【问题标题】：Detect a paste event in a react-native-material-textfield在 react-native-material-textfield 中检测粘贴事件
【发布时间】：2021-01-01 09:57:31
【问题描述】：

我想粘贴到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); 在使用 OutlinedTextField 时总是返回 false，但在 react native 的正常 TextInput 中它工作正常。

请帮我解决问题。谢谢

【问题讨论】：

标签： javascript react-native textfield clipboard

【解决方案1】：

我已经通过删除OutlinedTextField 的maxLength={2} 属性解决了这个问题。删除属性后，我能够检测到复制粘贴事件。

【讨论】：