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

Question

大家好，在我的网格中，我添加了“复制所有”材质 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。

Answer 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

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