在 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] 編寫自己的 function 並從按鈕的onClick方法調用 function 該按鈕可能會包裹圖標。

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