React js 通过单击按钮粘贴先前复制的文本

Question

我有足够长的文本是从另一个站点复制的，我必须确保当用户单击按钮时，文本被获取并复制到 value 变量中。

我尝试使用 getData，但它不起作用。

你能帮帮我吗？

代码：

import React, { useState, useEffect, useRef } from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

export default function MultilineTextFields() {
  const [value, setValue] = React.useState("");

  const ref = useRef(null);

  return (
    <Box
      component="form"
      sx={{
        "& .MuiTextField-root": { m: 1, width: "25ch" }
      }}
      noValidate
      autoComplete="off"
    >
      <Button
        variant="contained"
        color="primary"
        onClick={(e) => {
          let paste = (e.clipboardData || window.clipboardData).getData("Text");
          setValue(paste);
        }}
      >
        Paste
      </Button>

      <div>
        <TextField
          ref={ref}
          id="outlined-multiline-static"
          label="Multiline"
          multiline
          rows={40}
          value={value}
        />
      </div>
    </Box>
  );
}

Answer 1

需要注意的是，这种方法并不完全跨平台。有关兼容性，请参阅 Here。

可以使用剪贴板API，可以这样使用：

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

或使用异步语法：

const text = await navigator.clipboard.readText();

请记住，这会提示用户一个权限请求对话框，因此不可能发生有趣的事情。

如果从控制台调用上述代码将不起作用。它仅在您运行活动选项卡中的代码时有效。要运行来自控制台的代码，您可以设置超时并快速单击网站 window：

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

在 Google 开发人员 docs 中阅读有关 API 和用法的更多信息。

你也可能不能在代码沙箱上使用它，因为它是一个沙箱环境。

React js 通过单击按钮粘贴先前复制的文本

React js paste a previously copied text by clicking on a button

javascript

clipboard

paste

reactjs