reactjs - 在反应中更改后如何粘贴剪贴板数据？

Question

我为组件定义了以下事件处理程序

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

在事件处理程序中，我想停止调度事件并更改剪贴板的数据。我缺少的是如何更改数据以及如何在更改后调度它。

最终目标是限制用户可以输入的字符数。

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

我会很高兴得到任何帮助！

Answer 1

我一直在努力寻找一个好的解决方案。我发现的大多数答案都集中在仅从事件中获取粘贴内容。

MSDN 有一个很好的 vanilla.js 示例：https ://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

在 react 中，我们需要以某种 React 方式（调用回调、函数、调度动作等）使用修改后的值。

这是一个例子：

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 ;
    }, [...]);

Answer 2

这是可以做到的：

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