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

Question

Hi everyone, In my grid, I added "Copy All" material UI icons. My grid has 2 columns and 2 rows. I need to copy all column and rows value with copy all icon is clicked.

Code:

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>

I don't know how to copy the all value in the clipboard.

My expected result is: Which clicks the copyAll icon, In my clipboard write as aaa, bbb, ccb, babb.

Answer 1

CopyAllIcon like all MaterialIcon icons is nothing but a dumb SVG-based image/icon. It's not some smart component that actually does any copying or writing to the clipboard.

In order to implement actual writing to the clipboard, you'd have to write your own function using the [Web API][1] and call that function from a button's onClick method. That button may wrap the icon.

// 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

I got a solution

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