Question

在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/

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

材质用户界面：使用ButtonBase上传文件

2 个答案: