В React JS: как скопировать весь текст из сетки с помощью значка «Копировать все» из MUI

Question

Всем привет! В свою сетку я добавил значки пользовательского интерфейса материала «Копировать все». В моей сетке 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

у меня есть решение

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

Answer 2

CopyAllIconкак и все значки MaterialIcon, это не что иное, как тупое изображение/значок на основе SVG. Это не какой-то интеллектуальный компонент, который на самом деле копирует или записывает в буфер обмена.

Чтобы реализовать фактическую запись в буфер обмена, вам нужно написать свою собственную функцию с помощью [веб-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