单击 React 时发出警报警告答案

【问题标题】：Put Alert Warning when Clicking in React单击 React 时发出警报警告
【发布时间】：2022-01-14 03:26:00
【问题描述】：

我这里有一个图片上传器。我的问题是，如果您没有从autocomplete 中选择，我想让alert 在单击后首先出现。目前alert在选择图片后出现。

  const handleDrop = (e) => {
    e.nativeEvent.preventDefault();

    if (!value) {
      setOpen(true);
    } else {
      if (!e) return;
      const files = e.nativeEvent.dataTransfer.files;
      onUploadImage(files);
    }
  };

  const browseFiles = (e) => {
    if (!value) {
      setOpen(true);
    } else {
      if (!e) return;
      const files = e.currentTarget.files;
      onUploadImage(files);
    }
    e.target.value = null;
  };

【问题讨论】：

标签： reactjs ecmascript-6 react-hooks material-ui

【解决方案1】：

您可以通过在包装文件输入的按钮上添加一个 onClick 来实现这一点：

     <Button
      size="medium"
      variant="outlined"
      component="label"
      color="primary"
      onClick={(e) => {
        if (!value) {
          setOpen(true);
          e.nativeEvent.preventDefault();
        }
      }}
    >
      <input
        type="file"
        accept="image/*"
        multiple
        style={{ display: "none" }}
        onChange={(e) => browseFiles(e)}
      />
      Browse files
    </Button>

【讨论】：