Javascript 在“反应本机材质”文本字段中检测粘贴事件
我想粘贴到一个Javascript 在“反应本机材质”文本字段中检测粘贴事件,javascript,react-native,textfield,clipboard,Javascript,React Native,Textfield,Clipboard,我想粘贴到一个react native material textfield,但要根据粘贴的内容执行某些操作(即,如果粘贴的内容是链接,则相应地设置其样式)。然而,为了做到这一点,我需要知道什么时候有东西被粘贴到OutlinedTextField。我不知道如何收听粘贴事件。剪贴板在这里没有真正的帮助,因为它所做的一切都是设置/获取内容,而不是告诉我是否粘贴了任意内容 最小样本代码 import Clipboard from '@react-native-community/clipboard';
react native material textfield
,但要根据粘贴的内容执行某些操作(即,如果粘贴的内容是链接,则相应地设置其样式)。然而,为了做到这一点,我需要知道什么时候有东西被粘贴到OutlinedTextField
。我不知道如何收听粘贴事件。剪贴板在这里没有真正的帮助,因为它所做的一切都是设置/获取内容,而不是告诉我是否粘贴了任意内容
最小样本代码
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>
);
}
}
从“@react native community/Clipboard”导入剪贴板;
进口{
OutlinedTextField,
}来自“反应天然材料文本字段”;
导出默认类App扩展React.Component{
handleOnPaste=(内容)=>{
警报('检测到粘贴!内容:'.concat(内容));
}
handleOnChangeText=异步(内容)=>{
如果(内容=='')返回;
const copiedContent=await Clipboard.getString();
如果(copiedContent=='')返回;
const isPasted=content.includes(复制内容);
如果(已粘贴)此文件,请粘贴(内容);
}
render(){
返回(
800?48:40,玛金托普:10}
contentInset={{标签:1,输入:12}
baseColor={'#D4'}
线宽={1}
/>
);
}
}
在上面的示例代码中,const isPasted=content.includes(copiedContent)使用OutlinedTextField
时,code>始终返回false,但在react native的正常TextInput
中,它工作正常
请帮我解决这个问题。谢谢我通过删除OutlinedTextField
的maxLength={2}
属性解决了这个问题。删除属性后,我可以检测复制粘贴事件