NativeBase icon indicating copy to clipboard operation
NativeBase copied to clipboard

textarea listen paste event?

Open jasonz1987 opened this issue 1 year ago • 1 comments

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?

jasonz1987 avatar Jun 17 '23 09:06 jasonz1987

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>
  );
}

jasonz1987 avatar Jun 17 '23 09:06 jasonz1987