React-dropzone实现仅部分文本可点击的方法求助

完全可行，你可以通过以下方式实现仅“STL files”文本可点击触发文件选择，同时保留拖拽上传功能：

核心思路 #

• 用useRef获取input元素引用，手动触发文件选择弹窗
• 阻止根容器的默认点击行为，避免整个区域可点击
• 给目标文本绑定点击事件，调用input的click()方法
• 给目标文本添加样式设置为蓝色

修改后的代码 #

import React, { useCallback, useRef } from 'react';
import { useDropzone } from 'react-dropzone';

function DropZone() {
  const fileInputRef = useRef(null);
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles);
  }, []);

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: 'model/stl'
  });

  // 阻止根容器默认点击行为，避免整个区域可点击
  const rootProps = getRootProps({
    onClick: (e) => {
      e.preventDefault();
    }
  });

  // 手动触发文件选择弹窗
  const handleStlTextClick = () => {
    fileInputRef.current?.click();
  };

  return (
    <div {...rootProps}>
      <input {...getInputProps({ ref: fileInputRef })} />
      <div>
        Drag and drop your 
        <span 
          onClick={handleStlTextClick}
          style={{ color: 'blue', cursor: 'pointer', textDecoration: 'underline' }}
        >
          STL files
        </span>
         here.
      </div>
    </div>
  );
}

export default DropZone;

关键说明 #

• fileInputRef用来获取隐藏的input元素，方便手动触发点击
• 重写getRootProps的onClick事件，调用e.preventDefault()阻止默认的点击触发文件选择行为
• 给“STL files”所在的span绑定点击事件，调用fileInputRef.current.click()打开文件资源管理器
• 通过内联样式设置文本为蓝色、添加下划线和指针光标，提示可点击

内容的提问来源于stack exchange，提问作者Jasperan