Kopieren-zur-Zwischenablage-Funktion in React implementieren

1. In React mit der Methode e.clipboardData.setData() in die Zwischenablage kopieren
2. In React in die Zwischenablage kopieren mit navigator.clipboard.writeText()
3. In die Zwischenablage kopieren mit dem Paket react-copy-to-clipboard

Kopieren und Einfügen sind allseits beliebte Funktionen, die auf allen Arten von Geräten und Betriebssystemen verwendet werden.

Bei der Entwicklung einer Anwendung können Sie manchmal voraussagen, dass ein bestimmter Wert, beispielsweise ein Textstück, kopiert werden muss. In diesen Situationen können Sie eine Schaltfläche implementieren, die sie automatisch kopiert. Dies ist nützlich, da Benutzer von Telefonen manchmal Schwierigkeiten mit der Textauswahl haben.

ReactJS ist optimiert, um die Entwicklung benutzerfreundlicher Anwendungen zu ermöglichen. Das Framework macht es einfach, eine anklickbare Schaltfläche (oder einen Link) zu implementieren, die einen Textabschnitt kopiert.

In React mit der Methode e.clipboardData.setData() in die Zwischenablage kopieren

Diese Methode bietet eine einfache Möglichkeit, Ereignisse abzuhören und einen Text zu kopieren, sobald sie auftreten. Ihr Handler muss einen Verweis auf das Browserereignis erhalten.

In React ist dies eine Instanz von SyntheticEvent, die einfach als e bezeichnet wird. Schauen wir uns ein einfaches Beispiel an:

class App extends Component {
  constructor(props){
      super(props)
      this.state = {
        text: "This is a sample text"
      }
    }
  render() {
    const handleCopy = (e) => {
      e.preventDefault()
      e.clipboardData.setData("Text", this.state.text)
    } 
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={(e) => handleCopy(e)}>Copy Text</button>
      </div>)
  }
}

In diesem Beispiel haben wir einen Textwert, der in der Zustandseigenschaft text gespeichert ist. Sobald die Schaltfläche angeklickt wurde, führen wir den Handler aus, der die Methode e.clipboardData.setData() verwendet, um den Text in die Zwischenablage zu verschieben.

Die Methode akzeptiert zwei Argumente: den Typ des kopierten Werts und den Wert selbst.

Laut caniuse.com verwenden 95 % der Menschen, die weltweit im Internet surfen, den Browser, der diese Funktion unterstützt. Es ist also sicher zu verwenden.

In React in die Zwischenablage kopieren mit navigator.clipboard.writeText()

Die Schnittstelle Navigator ist eine modernere API. Es hat fast die gleiche Unterstützung (92%) für Benutzer auf der ganzen Welt. Es ist sowohl mit funktionalen als auch mit Class-Komponenten kompatibel.

Schauen wir uns ein Beispiel an:

class App extends Component {
  constructor(props){
      super(props)
      this.state = {
        text: "This is a sample text"
      }
    }
  render() {
    return (
      <div>
        <p>{this.state.text}</p>
        <button onClick={() => navigator.clipboard.writeText(this.state.text)}>Copy Text</button>
      </div>)
  }
}

Wie Sie sehen, ist dies eine einfachere Lösung, die weniger Codezeilen erfordert. Sie müssen keine Werte importieren oder externe Pakete installieren.

Allein aus diesem Grund ist für mich die Navigator-Oberfläche die bessere Möglichkeit, Text in eine Zwischenablage zu kopieren. Du kannst es selbst auf playcode ausprobieren.

Bevor Sie die Oberfläche Navigator verwenden, sollten Sie bedenken, dass ältere Versionen des Internet Explorers diese nicht unterstützen. Auch in Chrome scheint die Navigator-Oberfläche nur zu funktionieren, solange die Seite als sicher markiert ist (HTTPS oder localhost).

Abgesehen von diesen beiden Punkten gibt es keine Nachteile bei der Verwendung dieser Methode.

In die Zwischenablage kopieren mit dem Paket react-copy-to-clipboard

Wenn Sie nichts dagegen haben, ein externes Paket zu installieren, ist react-copy-to-clipboard wahrscheinlich die beste Lösung. Um detaillierte Informationen zu den verschiedenen Funktionen zu erhalten, werfen Sie einen Blick auf die offizielle npm-Seite.

Nach der Installation erhalten Sie Zugriff auf die benutzerdefinierte Komponente <CopyToClipboard>. Sie können das Attribut text verwenden, um einen zu kopierenden Wert anzugeben. Dann können Sie eine einfache <button>-Komponente hinzufügen, die als Auslöser fungiert, um den Textwert in die Zwischenablage zu kopieren.