reactjs - 如何将上传图标修复为文件上传输入（材料 UI）

Question

我目前正在尝试使用 Material UI 构建一个带有图标作为输入装饰的文件上传输入字段。我希望能够单击该图标来上传文件。

按照此处的 MUI 文档：输入装饰，我尝试遵循确切的格式，除了在演示中使用 IconButton 而不是密码可见性图标。

这是我的代码示例：

   <FormControl className={classes.formControl}>
      <InputLabel htmlFor="upload-script">Sim Script</InputLabel>
      <Input
        id="upload-script"
        type="file"
        value={values.script}
        onChange={() => handleChange('script')}
        endAdornment={
          <InputAdornment position="end">
            <IconButton aria-label="upload">
              <PublishIcon />                        // (here is my icon)
            </IconButton>
          </InputAdornment>
        }
      />
    </FormControl>

这行得通，但结果根本不是我想要的——这是它在浏览器中的截图：

您可以在右侧一直看到我的上传图标，但输入字段显然有自己的上传按钮和占位符文本（“未选择文件”）。

在网上看了一下，看到这里有一个建议：（类似 StackOverflow 的帖子）说我们应该添加style: {{ display: none }}到Input组件中，并添加component="span"为 IconButton 的属性。但是，当我尝试这样做时，浏览器会为我们提供以下内容：

（这是一直滚动...我的源图标不见了，输入字段下面没有行分隔符，间距明显搞砸了...）

显然，这些都不是我想要的哈哈。有人可以帮忙吗？？（我希望这个描述足够好......）

太感谢了！！

-

编辑： 这是@Shiladitya 的初始解决方案的样子：

但我希望文本字段有一行！我希望它看起来与“Sim Binary”文本字段完全一样，只是右侧有一个上传图标而不是下拉箭头。

Answer 1

给你一个解决方案

const handleFileUpload = () => {}

<>
  <input
    style={{
      display: "none"
    }}
    accept=".json"  // specify the file type that you wanted to accept
    id="choose-file"
    type="file"
    onChange={handleFileUpload}
  />
  <label htmlFor="choose-file">
    <IconButton aria-label="upload">
      <PublishIcon />
    </IconButton>
  </label>
</>

使用文本字段编辑

     <TextField
        className={classes.margin}
        id="input-with-icon-textfield"
        label="TextField"
        InputProps={{
          endAdornment: (
            <>
              <input
                style={{
                  display: "none"
                }}
                accept=".json"
                id="choose-file"
                type="file"
                onChange={handleFileUpload}
              />
              <label htmlFor="choose-file">
                <IconButton aria-label="upload">
                  <PublishIcon />
                </IconButton>
              </label>
            </>
          ),
        }}
      />

Answer 2

我最近返回并编辑了我的组件，该组件的灵感来自@Shiladitya，但现在使用了一个更好的系统，我以前不知何故错过了：

<TextField
  className={classes.formControl}
  id={`sim-script-${sim.uuid}`}
  label="Sim Script- click the Upload Icon"
  required
  inputRef={scriptInputRef}     // To focus on the field after clicking icon
  value={sim.script}
  InputProps={{
    readOnly: true,
    endAdornment: (
      <>
        <AdjustedTooltip title="Upload script" arrow>
          <IconButton
            aria-label="upload"
            className={classes.uploadIcon}
            component="label"             // THIS IS THE GENIUS CHANGE
          >
            <PublishIcon />
            <input
              hidden
              type="file"
              onChange={(e) => scriptUpload(e)}
            />
          </IconButton>
        </AdjustedTooltip>
      </>
    ),
  }}
/>

这样，我们可以移除所有的 input 和 label 包装器，而只需将 Material UI Button 设置为具有属性component="label"，并将 input 标签放在图标按钮内。

这里还有我的 onChange/scriptUpload 函数，以防人们感兴趣：

const scriptUpload = (e: ChangeEvent<HTMLInputElement>) => {
  // the first/only file selected by user
  if (e.target.files?.item(0)) {  
    onChange(sim.uuid, "script", e.target.files?.item(0)!.name);
  }

  // Focus textfield
  if (scriptInputRef.current) {
    scriptInputRef.current.focus();
  }
};

Answer 3

另一个解决方案。

* {
  margin: 0 auto;
  font-family: Helvetica;
}
html {
  background-color: #e9e9e9;
}

#choose-file {
  display: none;
}

#wrapper {
  display: inline-flex;
  justify-content: center;
  margin-left: 20px;
  background-color: orange;
  width: 60px;
  align-items: center;
  cursor: pointer;
}

<form>
  <label id="first">
   Sim Binary
  <div id="wrapper">
  <input
    accept=".json"
    id="choose-file"
    type="file"
  />
     ⇪
  </div>
     </label>
</form>