NativeBase
NativeBase copied to clipboard
textarea listen paste event?
Description
textarea onchangetext listen paste event?
CodeSandbox/Snack link
https://codesandbox.io/s/jovial-pine-n63xr8
Steps to reproduce
No response
NativeBase Version
3.3.1
Platform
- [ ] Android
- [ ] CRA
- [X] Expo
- [X] iOS
- [ ] Next
Other Platform
No response
Additional Information
on ios simulator device
can not listen paste event sometimes?
this is my code
import { Box, Button, Heading, HStack, Text, TextArea } from "native-base";
import React, { useState, useRef } from "react";
import { showMessage } from "react-native-flash-message";
import { UAParser } from "ua-parser-js";
export default function UserAgentParser() {
const [content, setContent] = useState("");
const [result, setResult] = useState(null);
const textareaRef = useRef(null);
const parseContent = () => {
if (!content) {
showMessage({
type: "warning",
message: "请输入UA信息",
});
return;
}
const parser = new UAParser(content); // you need to pass the user-agent for nodejs
const parserResults = parser.getResult();
setResult(parserResults);
};
return (
<Box alignItems="center" w="100%" p={4}>
<TextArea
ref={textareaRef}
value={content}
onChange={({ nativeEvent: { eventCount, target, text } }) => {
setContent(text);
}}
// onChangeText= {(text)=>{
// setContent(text)
// }}
minH={150}
placeholder="请输入浏览器UA信息:Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 635) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537"
/>
<HStack space={4} mt={4}>
<Button flex={1} onPress={parseContent}>
解析
</Button>
<Button
flex={1}
colorScheme="secondary"
onPress={() => {
setContent("");
textareaRef.current.clear();
setResult(null);
}}
>
清空
</Button>
</HStack>
{result && (
<Box w="100%" pt={4}>
<Heading fontSize="sm" pt={3} pb="3">
浏览器
</Heading>
<HStack justifyContent="space-between">
<Text>浏览器名称</Text>
<Text>{result.browser.name ?? "--"}</Text>
</HStack>
<HStack justifyContent="space-between">
<Text>浏览器版本</Text>
<Text>{result.browser.version ?? "--"}</Text>
</HStack>
<Heading fontSize="sm" pt={3} pb="3">
引擎
</Heading>
<HStack justifyContent="space-between">
<Text>引擎名称</Text>
<Text>{result.engine.name ?? "--"}</Text>
</HStack>
<HStack justifyContent="space-between">
<Text>引擎版本</Text>
<Text>{result.engine.version ?? "--"}</Text>
</HStack>
<Heading fontSize="sm" pt={3} pb="3">
设备
</Heading>
<HStack justifyContent="space-between">
<Text>设备制造商</Text>
<Text>{result.device.vendor ?? "--"}</Text>
</HStack>
<HStack justifyContent="space-between">
<Text>设备型号</Text>
<Text>{result.device.model ?? "--"}</Text>
</HStack>
<HStack justifyContent="space-between">
<Text>设备类型</Text>
<Text>{result.device.type ?? "--"}</Text>
</HStack>
<Heading fontSize="sm" pt={3} pb="3">
操作系统
</Heading>
<HStack justifyContent="space-between">
<Text>系统名称</Text>
<Text>{result.os.name ?? "--"}</Text>
</HStack>
<HStack justifyContent="space-between">
<Text>系统版本</Text>
<Text>{result.os.version ?? "--"}</Text>
</HStack>
<Heading fontSize="sm" pt={3} pb="3">
CPU
</Heading>
<HStack justifyContent="space-between">
<Text>CPU架构</Text>
<Text>{result.cpu.architecture ?? "--"}</Text>
</HStack>
</Box>
)}
</Box>
);
}