在React中:如何使用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编写自己的函数，并从按钮的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>
    );
}