Как я могу получить измененное значение поля ввода в событии onPaste?

Question

Я занимаюсь onPaste событие в приложении React. У меня проблема в том, что value элемента не обновляется до тех пор, пока не закончится событие вставки, и, следовательно, я не могу определить, перезаписывают ли вставленные данные существующее значение или распространяется на существующее значение.

В следующем фрагменте, если у вас есть слово "сыр", скопированное в буфер обмена, и заново запустите этот фрагмент для обоих приведенных ниже сценариев:

1. Вставьте слово в конце существующего значения, чтобы оно стало "123cheese".
2. Вставьте слово поверх существующего значения, чтобы оно стало "сыром".

В обоих вошли value будет равен "123", и невозможно определить, как значение изменилось с value собственность одна.

class Example extends React.Component {
  handlePaste(e) {
    const clipboardData = e.clipboardData.getData('text');
    const value = e.target.value;
    
    console.log("Pasted:", clipboardData);
    console.log("Value:", value);
  }
  
  render() {
    return <input defaultValue="123" onPaste={this.handlePaste.bind(this)} />;
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('example')
)

<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>
<p>tl;dr: Please refer to the instructions above the snippet.</p>

Теперь я хорошо понимаю, что потенциальным решением было бы отложить код, который я хочу выполнить в обработчике, до тех пор, пока событие не закончится, но это кажется хакерским и ненужным:

class Example extends React.Component {
  handlePaste(e) {
    const clipboardData = e.clipboardData.getData('text');
    ((target) => {
      setTimeout(() => {
        const value = target.value;
    
        console.log("Pasted:", clipboardData);
        console.log("Value:", value);
      }, 100)
    })(e.target);
  }
  
  render() {
    return <input defaultValue="123" onPaste={this.handlePaste.bind(this)} />;
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('example')
)

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

Как я могу получить измененное значение (или каким оно станет) в течение onPaste обработчик события?