在 React JS 中：如何使用 MUI 中的“复制全部”图标从网格中复制所有文本

Posted 2023-02-22

【中文标题】在 React JS 中：如何使用 MUI 中的“复制全部”图标从网格中复制所有文本

【英文标题】：In React JS : How to copy the all text from grid using "Copy All" icon from MUI

【发布时间】：2022-01-23 02:52:17

【问题描述】：

大家好， 在我的网格中，我添加了“复制所有”材质 UI 图标。我的网格有 2 列和 2 行。我需要复制所有列和行值并单击复制所有图标。

代码：

const list=[
id:1,
name:'aaa'
,
id:2,
name:'bbb',
id:3,
name:'ccb',
id:4,
name:'babb',
]
<div>
<CopyAllIcon/>
<Grid container rowSpacing=2>
list.map((item)=>
<Grid xs=6>
item.name)
</Grid>
</Grid>
</div>

我不知道如何复制剪贴板中的所有值。

我的预期结果是： 单击copyAll图标，在我的剪贴板中写为aaa，bbb，ccb，babb。

【参考方案1】：

CopyAllIcon 就像所有 MaterialIcon 图标一样，不过是一个基于 SVG 的愚蠢图像/图标。它不是一个真正执行任何复制或写入剪贴板的智能组件。

为了实现对剪贴板的实际写入，您必须使用 [Web API][1] 编写自己的函数，并从按钮的 onClick 方法调用该函数。该按钮可能会包裹图标。

// function to write to clipboard
const copyAll = () => ...

<IconButton onClick=copyAll>
  <CopyAlIcon/>
</IconButton> 


  [1]: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#writing_to_the_clipboard

【参考方案2】：

我有办法

function CopyAllTexts()

    const list=[
    id:1,
    name:'aaa'
    ,
    id:2,
    name:'bbb',
    id:3,
    name:'ccb',
    id:4,
    name:'babb',
    ];
    const handleCopyALLText=()=>
    var copiedTextValues = list.map(function(item) 
      return item.name;
    );
    navigator.clipboard.writeText(copiedTextValues);
    ;
    return(
    <div>
    <CopyAllIcon onClick=handleCopyALLText/>
    <Grid container rowSpacing=2>
    list.map((item)=>
    <Grid xs=6>
    item.name)
    </Grid>
    </Grid>
    </div>
    );