reactJS材质UI图标按钮上传文件

Question

我想知道如何使用IconButton打开目录来上传文件？

<IconButton 
  iconClassName="fa fa-plus-square" 
  onClick={(e) => e.stopPropagation()} 
  type='file'
/>

使用下面的代码显示图标按钮和上传文件的另一个按钮

<IconButton iconClassName="fa fa-plus-square" onClick={(e) => e.stopPropagation()}>
    <input type="file type='file'>
</IconButton>

Answer 1

我认为材料 ui 示例的标准方法：

 <input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
  <label htmlFor="icon-button-file">
    <IconButton color="primary" className={classes.button} component="span">
      <PhotoCamera />
    </IconButton>
  </label>

Answer 2

一些东西:

1. 你不需要type='file'在IconButton上,只需要在输入上

2. IconButton不希望它的子节点不是SVGIcon,所以我建议你使用常规按钮

3. 在这种情况下我不会调用stopPropagation

4. 你输入的类型道具中有一个拼写错误.你有type="file type='file'.它应该是type="file"

所以,把所有这些放在一起:

<FlatButton label="Choose file" labelPosition="before">
  <input type="file" style={styles.exampleImageInput} />
</FlatButton>

如果你仍然希望它是一个图标而不是一个按钮,我怀疑你可以做一些事情<input>或将它作为子项添加到没有标签的FlatButton.

Answer 3

您可以使用以下代码使用IconButton实现相同的功能。

<IconButton onClick={() => this.fileUpload.click()}>
   <FontIcon className="material-icons" >
       add_a_photo
   </FontIcon>
  </IconButton>
<input type="file" ref={(fileUpload) => {
                    this.fileUpload = fileUpload;
                  }}
  style={{ visibility: 'hidden'}} onChange={this.groupImgUpload} />