Как поделиться текущим URL в ReactJS
Я хочу дать пользователю возможность нажать кнопку, которая скопирует текущий URL-адрес в буфер обмена. Поскольку я использую react-router, все, что мне нужно, это извлечь this.props.history.location.pathname и добавить его к своему доменному имени.
Вторая часть - сохранить это в буфер обмена. Как это может быть сделано? Кроме того, ограничено ли решение некоторыми браузерами?
Ответы 2
реагировать на копирование в буфер обмена, предлагает скопировать текст в буфер обмена.
Вот рабочая демонстрация библиотеки: http://nkbt.github.io/react-copy-to-clipboard/
Вот базовый пример использования библиотеки:
import { CopyToClipboard } from 'react-copy-to-clipboard'
render() {
// Or if you prefer, you can use react-router API
const url = window.location.href
<CopyToClipboard text = {url}>
<button>Copy URL to the clipboard</button>
</CopyToClipboard>
}
Если вы не хотите использовать библиотеки, вы можете легко сделать это вручную:
Для этого вам понадобится элемент input. Элемент должен содержать значение, которое вы хотите скопировать. Затем, чтобы запустить копию, нужно выделить текст и сделать document.execCommand("copy"). Это сохранит входное значение в буфер обмена пользователя.
Если вы не хотите, чтобы элемент ввода был видимым, вы можете присвоить ему position: absolute вместе с некоторыми значениями top и left и отправить его в нейтральную зону, как я сделал ниже:
class MyApp extends React.Component {
constructor() {
super();
this.copy = this.copy.bind(this);
}
copy() {
this.elRef.select();
document.execCommand("copy");
}
render() {
return (
<div>
<input id = "url-input" ref = {el => this.elRef = el} value = {this.props.url} />
<button onClick = {this.copy}>Copy</button>
</div>
)
}
}
ReactDOM.render(<MyApp url = "http://google.com" />, document.getElementById("app"));#url-input {
position: absolute;
top: -9999px;
left: -9999px;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "app"></div>В качестве альтернативы вы можете создать временный DOM-узел с помощью javascript, добавить его в тело, а затем удалить после завершения копирования.
class MyApp extends React.Component {
constructor() {
super();
this.copy = this.copy.bind(this);
}
copy() {
const el = document.createElement('input');
el.value = this.props.url;
el.id = "url-input";
document.body.appendChild(el);
el.select();
document.execCommand("copy");
el.remove();
}
render() {
return <button onClick = {this.copy}>Copy</button>
}
}
ReactDOM.render(<MyApp url = "http://google.com" />, document.getElementById("app"));<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "app"></div>
Это захватывает только URL-адрес, поскольку это был первый раз, когда компонент отображается. Если URL-адрес изменяется, компонент не выполняет повторную визуализацию и, следовательно, сохраняет исходное значение.