Gestisci l'evento onPaste in React-Esempi di codice

Radu TM
Victor Talmacinschi

Gestisci l'evento onPaste in React

JavaScript di Victor Talmacinschi June 16, 2022

import React, { useState } from 'react';

function App() {
  // tenere traccia di ciò che è stato incollato nello stato
  const [pastedText, setPastedText] = useState('');

  // aggiornare lo stato quando l'utente incolla qualcosa
  const handlePaste = e => {
    // ottenere i dati della clipboard
    const clipboardData = e.clipboardData || window.clipboardData;
    // ottenere i dati incollati come testo
    const pastedData = clipboardData.getData('text');
    // aggiornare lo stato con i dati incollati
    setPastedText(pastedData);
  };

  return (
    <div>
      <h1>Gestisci l'evento onPaste in React</h1>
      <textarea
        onPaste={handlePaste}
        placeholder="Incolla qualcosa qui!"
      ></textarea>
      {/* mostra solo il testo incollato quando c'è qualcosa da visualizzare */}
      {pastedText && <p>{pastedText}</p>}
    </div>
  );
}

export default App;

0

25.859

Gestisci l'evento onPaste in React

JavaScript di Radu TM June 16, 2022

import React, { useState } from 'react';

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

  function handlePaste(e) {
    // Ottenere dati dagli appunti
    const clipboardData = e.clipboardData || window.clipboardData;
    // Ottenere dati incollati
    const pastedData = clipboardData.getData('Text');
    // Aggiornare lo stato
    setText(pastedData);
  }

  return (
    <div>
      <h1>Gestisci l'evento onPaste in React</h1>
      <textarea
        value={text}
        onPaste={handlePaste}
      />
    </div>
  );
}

export default App;

0

25.859

Richieste JavaScript simili

Ultime richieste JavaScript

Esplora gli esempi di codice per categorie