Material UI：使用 ButtonBase 上传文件答案

【问题标题】：Material UI: File Upload using ButtonBaseMaterial UI：使用 ButtonBase 上传文件
【发布时间】：2019-02-27 04:55:08
【问题描述】：

在 Material UI 文档中，他们展示了如何通过隐藏输入文件然后在标签内添加 Button 组件来创建“上传”按钮。（见：https://material-ui.com/demos/buttons/）

现在，我想要一个不同的按钮，所以我正在使用 ButtonBase，但它不起作用 - 文件选择弹出窗口不显示。我不确定我是否遗漏了什么，也许我遗漏了一些参数来传递它？

<input
    accept="image/*"
    className="d-none"
    id="image-upload"
    type="file"
  />
  <label htmlFor="image-upload"
    className="d-block" >
    <Button component="span">
      Upload
    </Button> {/* working */}
    <ButtonBase>
      test
    </ButtonBase>  {/* not working*/}
 </label>

ButtonBase API：https://material-ui.com/api/button-base/

【问题讨论】：

标签： reactjs file-upload material-ui

【解决方案1】：

首先，您运行的是什么版本？ Material-UI 是一个非常快速的项目，因此您需要确保检查文档以了解您使用的任何版本。

我喜欢使用显式事件（在这种情况下为ref），这在3.1.0 下对我有用

<input 
  ref={'file-upload'}
  type='file'
/>
<ButtonBase
  onClick={e => {
    this.refs['file-upload'].click()
  }}
>
  <div style={{
    color: 'red',
    backgroundColor: 'yellow',
    border: '1px solid green',
  }}
  >
    Upload!
  </div>
</ButtonBase>
<hr />
<Button
  type='file'
  onClick={e => {
    this.refs['file-upload'].click()
  }}
>
  File Upload Material
</Button>

我在我的一个项目中使用了类似的东西，我只是隐藏了<input type='file' /> 元素。

【讨论】：

谢谢！让我试一试，但我注意到您添加了一个 onClick 功能？你知道为什么 Button 组件即使没有它也能工作吗？
@AbigailA。我不知道，因为我不太确定它是如何渲染的，但我怀疑它是直接渲染 <button> 标记，而不是像 ButtonBase 组件那样渲染任何东西。您始终可以检查元素以查看幕后发生的事情。我敢打赌<ButtonBase><button /></ButtonBase> 会产生同样的效果。

【解决方案2】：

同样可以用钩子实现

export default function myForm(props) { 
 const inputEl = React.useRef(null);
  const onButtonClick = () => {
    console.log("inside")
    // `current` points to the mounted file input element
    inputEl.current.click();
  };

  return (
    <React.Fragment>
        Upload Photos
          <br/>
          <input
        accept="image/*"
        className={classes.input}
        id="outlined-button-file"
        multiple
        type="file"
        ref={inputEl}
      />
      <label htmlFor="outlined-button-file">

        <ButtonBases
        onClick={()=>onButtonClick()}
        />
      </label>
    </React.Fragment>
)}

不要忘记在 ButtonBasses 组件中调用 onClick。

export default function ButtonBases(props) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
       <ButtonBase
          ...
          onClick={props.onClick}
        >
          ....
        </ButtonBase>
      ))}
    </div>
  );
}

【讨论】：