search

981377660LMT / ts

ts学习
6 stars 1 forks source link

paste 事件 #461

Open 981377660LMT opened 6 months ago

981377660LMT commented 6 months ago

如何让upload 组件响应 paste 事件

在 Upload 组件内部添加了一个隐藏的 input 元素，并在这个 input 元素上监听 paste 事件。当用户在 Upload 组件上执行粘贴操作时，实际上是在这个隐藏的 input 元素上执行的，因此我们可以在 paste 事件处理函数中获取到用户粘贴的内容。

981377660LMT commented 6 months ago 
  // 使用隐藏的input来监听paste事件
  const hiddenInputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    hiddenInputRef.current?.focus();
  }, []);
  useDrop(hiddenInputRef, {
    onFiles (files) {
      handleUpload(files);
    }
  });

 <input ref={hiddenInputRef} style={{ position: 'absolute', opacity: 0 }} type="text" onBlur={() => hiddenInputRef.current?.focus()} />