使用现有函数 inState 反应钩子答案

【问题标题】：React hooks using an existing function inState使用现有函数 inState 反应钩子
【发布时间】：2020-08-21 10:42:18
【问题描述】：

我正在根据本教程使用拖放上传文件的 React 组件：https://blog.logrocket.com/create-a-drag-and-drop-component-with-react-dropzone/ 而且我对 React Hooks 组件类型不太熟悉。

在我的自定义中，我想在文件被拖放到该区域后隐藏拖放容器并仅显示文件容器。

我为此创建的状态是const [isDropped, setIsDropped] = useState(false);

这是在文件放入后显示文件的功能：

  const fileDrop = (e) => {
    e.preventDefault();
    const files = e.dataTransfer.files;
    if (files.length) {
      handleFiles(files);
    }
  };

最后，这是我想要完成的任务的缩略版：

Drop.js

      {!isDropped ? (
        <div
          className="drop_container"
          onDragOver={dragOver}
          onDragEnter={dragEnter}
          onDragLeave={dragLeave}
          onDrop={fileDrop}
          // Alternate onDrop ~~~> onDrop={() => setIsDropped(!isDropped)}
          onClick={fileInputClicked}
        > 

            <p className="drop_message">
              <input
                ref={fileInputRef}
                className="file-input"
                type="file"
                multiple
                onChange={filesSelected}
              />
             Drop your file (format pdf max 20MB)
            </p>

              ) : (

            <div className="file-display-container">
                <div className="file-type">{fileType(data.name)}</div>
            </div>
             
           )}

我的想法是在onDrop 中设置状态onDrop={() => setIsDropped(!isDropped)}，但是fileUpload 函数已经使用了onClick。

我的问题是如何将函数组合到我的状态中，或者如何将状态添加到当前的 onClick 事件中？

【问题讨论】：

标签： reactjs

【解决方案1】：

如果您将所选文件保持在状态，那么您不需要使用任何状态来保存值，例如，用户是否删除了文件，您可以检查状态中是否存在某些值（用于按住选定的文件值）然后您可以禁用拖放和单击事件。

【讨论】：

【解决方案2】：

在阅读了这个 React 类组件示例后，我想出了如何通过设置 fileDrop 函数内部的状态来解决这个问题：React Setting state inside of a function

查看解决方案，我将状态从 div 中的onDrop 移至函数内部。

  const fileDrop = (e) => {
    e.preventDefault();
    const files = e.dataTransfer.files;
    if (files.length) {
      handleFiles(files);
    }
    setIsDropped(!isDropped);
  };

这个解决方案符合我在这个项目中的预期。

【讨论】：