How can I paste clipboard data after changing it in react?

Question

I have defined the following event handler for the component

<Editable
  onKeyDown={(event) => handleChange(event)
  onPaste={(event) => handlePaste(event)}
/>

Within the event handler I'd like to stop the event from being dispatched and change the data of the clipboard. What I'm missing is how to change the data and how to dispatch it after changing it.

The ultimate goal is to restrict the number of characters a user can type in.

const handlePaste = (event) => {
  event.preventDefault();
  let data = event.clipboardData.getData('Text');
  // Changing the data here
  // pasteing the data as input to Editable
};

I'd be glad over any kind of help!

Answer 1

This is how it could be done:

const handlePaste = (event) => {
  // 1. Remove the event.preventDefault();

  let data = event.clipboardData.getData('Text');

  // 2. Edit the data by just overwriting data field
  data = data.substring(2) // Omitting the first character;
  
};

Answer 2

I've struggled finding a good solution for this. Most answers I found focus on only getting the paste content from the event.

MSDN has a good example for vanilla.js: https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

In react, we need to use the modified value in some React way (call callback, function, dispatch action, etc.).

Here's an example:

const handleOnPaste: React.ClipboardEventHandler = useCallback((event) => {
        const pasteContent = event.clipboardData.getData('text');

        // Modify it
        const modified = pasteContent.toUpperCase();

        // This is important. You want to prevent the original one from bubbling.
        event.preventDefault();

        // You need to use the new modified value manually. Some examples:

        // Controlled component - has a callback to set value
        onChange(modified);

        // Has a state value
        setValue(modified);

        // You have a ref to the input (or other) element
        ref.current.value = modified ;
    }, [...]);