React-dropzone：防止内部元素显示文件选择器

Question

我目前正在使用React-dropzone插件，并遇到了文档中未准确描述的用例。

基本上我有以下几个要素：

• 一个应该允许两者的外部拖放区
  • 拖放，以及
  • 本机文件选择器on click
• 不显示本机文件选择器的内部按钮on click

我现在遇到的问题是当单击内部按钮时阻止本机文件选择器显示。

为了说明我的示例，您可以将此代码粘贴到“查看代码”部分。

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Dropzone(props) {
  const {getRootProps, getInputProps, open, acceptedFiles} = useDropzone({
    // Disable click and keydown behavior
    noKeyboard: true
  });

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <div className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here</p>
        <InnerButton />
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </div>
  );
}

function InnerButton(props) {
  const { getRootProps } = useDropzone({ noClick: true }); // doesn't stop the parent's input file picker

  return (
    <button
      {...getRootProps({
        onClick: (event) => event.stopPropagation(), // this is bad for many reasons
      })}
      type="button">
      This button should not open the file picker
    </button>
  );
}

<Dropzone />

我认为使用event.stopPropagation()是一种方法，但我读到出于多种原因应该避免使用它（来源 1，来源 2）。我尝试noClick: true在内部按钮中使用，但它不起作用 - 很可能是因为它无法停止父<input>标签。

除了使用之外，我还应该尝试另一种方法吗stopPropagation？

Answer 1

我在 GitHub 上得到了答案，将其发布在这里以防其他人遇到同样的问题。

没有办法解决这个问题。您必须使用stopPropagation()来阻止事件在 DOM 中冒泡。noClick您的另一个选择是也对父母使用。

noClick仅在单击 dropzone 节点时禁用打开文件选择器。它不会阻止事件冒泡。

我们唯一能做的就是提供一个noClickBubbling调用 的选项stopPropagation()，但用户已经可以这样做。