Как получить вставленную ценность из события Reactjs onPaste

Если у меня есть текстовый элемент ввода Reactjs с назначенным ему событием onPaste, как я могу получить вставленное значение в ответе?

на данный момент я получаю в консоли SyntheticClipboardEvent со всеми свойствами как null. Я прочитал, что console.log - это асинхронный checker, поэтому поэтому большинство значений являются нулевыми, поскольку они смотрят в будущее.

Однако мне интересно, как получить значение.

Приветствия

Ответ 1

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

Ответ 2

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

Форматы представляют собой строки Unicode, дающие тип или формат данных, обычно заданный типом MIME. Некоторые значения, которые не являются типами MIME являются специальными для устаревших причин (например, "текст" ).

Пример:

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

Ответ 3

сначала включите модуль Facebook DataTransfer:

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

то вы можете сделать:

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

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

вы приветствуете;)

Ответ 4

Этот код проверяет разницу между значением ввода перед вставкой и после которого я думаю, что оно не ограничено какой-либо поддержкой браузера. Вот Jsfiddle

function getDifference(oldval, newval)
{
    var i = 0;
    var j = 0;
    var result = "";

    while (j < newval.length)
    {
        if (typeof (oldval[j]) === "undefined"){
           if (oldval[j-result.length] != newval[j]){
              result += newval[j];
           }  
        }else{
           if (oldval[j] != newval[j]){
              result += newval[j];
           }  
        }
            
        j++;
    }
    return result;
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state={
      pasting: false,
      beforePasting : ""
    };
   this.paste = this.paste.bind(this);
   this.change = this.change.bind(this);
  }
  
  paste(e){
    this.setState({pasting: true, beforePasting: e.target.value});
  }
  change(e){
    if(this.state.pasting){
      var oldval = this.state.beforePasting;
      var newval = e.target.value;
      var pastedValue = getDifference(oldval, newval);
      console.log(pastedValue);
      this.setState({pasting: false});
    }
  }
  
  render() {
    return (
      <div>
         <input type="text" onPaste={this.paste} onChange={this.change} />
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

input {
  margin-right: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Ответ 5

данные можно найти на clipboardData и проанализировать на строку следующим образом:

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

Ответ 6

Для меня это быстро и сработало.

Событие onPaste срабатывает до изменения входного значения.

Поэтому нам нужно использовать e.persist()

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