Material UI:使用ButtonBase上传文件

Question

在材料UI文档中，他们展示了如何通过隐藏输入文件并在标签中添加button组件来创建"Upload“按钮。(请参阅：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接口：https://material-ui.com/api/button-base/

Answer 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' />元素。

Answer 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>
  );
}