Bearbeiten Sie das onPaste-Ereignis in React-Code Beispiele

import React, { useState } from 'react';

function App() {
  // Verfolgen Sie, was in den Zustand eingefügt wurde
  const [pastedText, setPastedText] = useState('');

  // Aktualisieren Sie den Zustand, wenn der Benutzer etwas einfügt
  const handlePaste = e => {
    // Holen Sie sich die Zwischenablage-Daten
    const clipboardData = e.clipboardData || window.clipboardData;
    // Holen Sie sich die eingefügten Daten als Text
    const pastedData = clipboardData.getData('text');
    // Aktualisieren Sie den Zustand mit den eingefügten Daten
    setPastedText(pastedData);
  };

  return (
    <div>
      <h1>Behandeln Sie das onPaste-Ereignis in React</h1>
      <textarea
        onPaste={handlePaste}
        placeholder="Fügen Sie hier etwas ein!"
      ></textarea>
      {/* Zeigen Sie nur den eingefügten Text an, wenn es etwas zum Anzeigen gibt */}
      {pastedText && <p>{pastedText}</p>}
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('');

  function handlePaste(e) {
    // Zwischenablage-Daten abrufen
    const clipboardData = e.clipboardData || window.clipboardData;
    // Eingefügte Daten abrufen
    const pastedData = clipboardData.getData('Text');
    // Status aktualisieren
    setText(pastedData);
  }

  return (
    <div>
      <h1>Verarbeiten Sie das onPaste-Ereignis in React</h1>
      <textarea
        value={text}
        onPaste={handlePaste}
      />
    </div>
  );
}

export default App;