score:-1

first include Facebook DataTransfer module:

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

then you can do:

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

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

you welcome ;)

score:0

For me this is quick and worked.

onPaste event fires before the input's value is changed.

So we need to use e.persist()

<input 
   onPaste={(e)=>{
    e.persist();
    setTimeout(()=>{ this.handleChange(e)},4)}
   }
   value={this.state.value}/>

score:1

the data can be found on clipboardData, and parsed to string as follows:

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

score:5

Here is maybe a simpler "no paste" example using React hooks

export default function NoPasteExample() {
  const classes = useStyles();
  const [val, setVal] = React.useState("");
  const [pasted, setPasted] = React.useState(false);

  const handleChange = e => {
    if (!pasted) {
      setVal(e.target.value);
    }
    setPasted(false);
  };

  const handlePaste = () => {
    setPasted(true);
  };
  return (
    <form className={classes.root} noValidate autoComplete="off">
      <div>
        <TextField
          value={val}
          onPaste={handlePaste}
          onChange={e => handleChange(e)}
        />
      </div>
    </form>
  );
}

live demo: https://codesandbox.io/s/material-demo-w61eo?fontsize=14&hidenavigation=1&theme=dark

score:11

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

The formats are Unicode strings giving the type or format of the data, generally given by a MIME type. Some values that are not MIME types are special-cased for legacy reasons (for example "text").

example:

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'));
}

score:60

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

Related Query

More Query from same tag