реагировать: копировать значение состояния компонента в буфер обмена без элемента-пустышки

Question

В моем проекте есть один случай использования: пользователь нажимает одну кнопку и затем копирует некоторые данные в буфер обмена для следующего шага.

Скопированные данные относятся к нажатой кнопке и сохраняются в состоянии компонента.

Я выполняю поиск и нахожу потенциальное решение следующим образом:

function copyToClipboard(text){
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute('value', text);
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

до некоторой степени, нам нужно создать фиктивный элемент, установить скопированные данные на фиктивнуюэлемент и выберите элемент, затем выполните метод execCommand(copy).

возможно ли это сделать без создания фиктивного элемента?Я знаю, что есть несколько плагинов реагирования на буфер обмена, но я просто хочу использовать ванильный JavaScript.спасибо

Answer 1

Ваше решение работает хорошо.

Если значение, которое вы хотите скопировать, еще не отображается в DOM, ваш метод Document.createElement('input')... является хорошим способом создания узла документа, о котором знает Document,но это не видно пользователю.Как только вы используете .createElement(), вы можете вызвать execCommand() на нем, чтобы скопировать значение в буфер обмена.

Метод execCommand() предоставляется HTML5Document.Это означает, что Document должен знать об узле, на который вы нацелены, прежде чем вы сможете использовать метод (это называется Выбор ).

Однако, если вы хотите скопировать текст из элементауже отрисованный в dom (например, вход в форме), вы можете использовать callback ref React. Вот хороший пример использования ref для этого .Это довольно просто, поэтому использование библиотеки может оказаться излишним.