Come ottenere il valore incollato dall'evento Reactjs onPaste

Question

se si dispone di un elemento di testo di input Reactjs con l'evento onPaste assegnato, come è possibile ottenere il valore incollato nella risposta?

al momento quello che ottengo nella console è un SyntheticClipboardEvent con tutte le proprietà come null. Ho letto che console.log è un controllo asincrono, ecco perché la maggior parte dei valori è nullo mentre guardano al futuro.

Tuttavia mi chiedo come ottenere il valore.

Acclamazioni

Answer 1

onPaste: function(e) { 
    console.log(e.clipboardData.getData('Text')); 
}, 

Answer 2

i dati possono essere trovati sul clipboardData, e analizzato per stringa come segue:

event.clipboardData.items[0].getAsString(text=>{ 
    // do something 
}) 

Answer 3

includere primo modulo Facebook DataTransfer:

var DataTransfer = require('fbjs/lib/DataTransfer'); 

allora si può do:

onPaste: function (evt) { 
     var data = new DataTransfer(evt.clipboardData); 

     var text = data.getText(); 
     var html = data.getHTML(); 
     var files = data.getFiles(); 
}, 

il benvenuto;)

Answer 4

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types

I formati sono stringhe Unicode che danno il tipo o il formato dei dati, generalmente dato da un tipo MIME. Alcuni valori che non sono tipi MIME hanno un involucro speciale per motivi legacy (ad esempio "testo").

esempio:

onPaste: function(e) { 
    console.log(e.clipboardData.getData('Text')); 
    console.log(e.clipboardData.getData('text/plain')); 
    console.log(e.clipboardData.getData('text/html')); 
    console.log(e.clipboardData.getData('text/rtf')); 

    console.log(e.clipboardData.getData('Url')); 
    console.log(e.clipboardData.getData('text/uri-list')); 
    console.log(e.clipboardData.getData('text/x-moz-url')); 
}