reactjs 使用react-dropzone防止打开对话框

cetgtptt 于 2023-08-04 发布在 React

关注(0)|答案(2)|浏览(146)

我使用react-dropzone上传文件。当文件上传时，它们存储在一个数组中，我用它来列出所有上传的项目。
我在每个li的侧面添加了一个按钮，用于从数组中删除特定的文件。
它工作得很好，但每次我删除一个文件时都会打开一个对话框来选择一个新文件。
有没有可能防止这种行为？
这是一个简化的沙盒。删除按钮必须仅用于控制台日志，而不是打开对话框：sandbox
下面是简化的代码：

import { useState } from "react";
import "./styles.css";
import Dropzone from "react-dropzone";
import * as React from "react";

export default function App() {
  const [files, setFiles] = useState([{ name: "test" }]);

  const handleDrop = () => {
    console.log("dropped");
  };

  return (
    <div className="App">
      <h1>React Typescript Tailwind CSS started</h1>

      <Dropzone onDrop={handleDrop}>
        {({ getRootProps, getInputProps }) => (
          <div style={{ border: "2px solid black", height: "100px" }}>
            <div>
              <div {...getRootProps()}>
                <input {...getInputProps()} />

                <button>Select a file</button>

                {files && files.length > 0 && (
                  <ul>
                    {files.map((file) => (
                      <li key={file.name} className="relative w-fit">
                        {file.name}
                        <button onClick={() => console.log("delete")}>
                          delete
                        </button>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
          </div>
        )}
      </Dropzone>
    </div>
  );
}

字符串

reactjs

来源：https://stackoverflow.com/questions/76801534/prevent-open-dialog-onclick-of-a-button-with-react-dropzone

2条答案

按热度按时间

j91ykkif1#

请参见在单击时使用open()
如果在内部元素上绑定click事件并使用open()，它也会触发根元素上的click，导致文件对话框打开两次。要防止这种情况，请在根目录上使用noClick：
选择1.使用useDropzone({ noClick: true })挂钩

import { useState } from 'react';
import { useDropzone } from 'react-dropzone';
import * as React from 'react';

export default function App() {
    const [files, setFiles] = useState([{ name: 'test' }]);
    const { getRootProps, getInputProps, open } = useDropzone({ noClick: true });

    return (
        <div className="App">
            <h1>React Typescript Tailwind CSS started</h1>
            <div style={{ border: '2px solid black', height: '100px' }}>
                <div {...getRootProps()}>
                    <input {...getInputProps()} />
                    <button onClick={open}>Select a file</button>
                    {files && files.length > 0 && (
                        <ul>
                            {files.map((file) => (
                                <li key={file.name} className="relative w-fit">
                                    {file.name}
                                    <button
                                        type="button"
                                        onClick={() => {
                                            console.log('delete');
                                        }}>
                                        delete
                                    </button>
                                </li>
                            ))}
                        </ul>
                    )}
                </div>
            </div>
        </div>
    );
}

字符串
codesandbox
选择2.将noClick属性传递给Dropzone组件。

import { useState } from 'react';
import Dropzone from 'react-dropzone';
import * as React from 'react';

export default function App() {
    const [files, setFiles] = useState([{ name: 'test' }]);

    const handleDrop = () => {
        console.log('dropped');
    };

    return (
        <div className="App">
            <h1>React Typescript Tailwind CSS started</h1>

            <Dropzone onDrop={handleDrop} noClick>
                {({ getRootProps, getInputProps, open }) => (
                    <div style={{ border: '2px solid black', height: '100px' }}>
                        <div>
                            <div {...getRootProps()}>
                                <input {...getInputProps()} />
                                <button onClick={open}>Select a file</button>
                                {files && files.length > 0 && (
                                    <ul>
                                        {files.map((file) => (
                                            <li key={file.name} className="relative w-fit">
                                                {file.name}
                                                <button onClick={() => console.log('delete')}>delete</button>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                            </div>
                        </div>
                    </div>
                )}
            </Dropzone>
        </div>
    );
}

型
codesandbox的

赞(0）回复(0）举报 2023-08-04

qxgroojn2#

1.将noClick设置为true，以防止每次有人单击div内的任何区域时都打开对话框
const {getRootProps，getInputProps，open} = useDropzone（{noClick：true}）
1.当您必须打开对话框时，请使用以下命令：onClick={open}

赞(0）回复(0）举报 2023-08-04