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

【问题标题】：reactJS material UI Icon button to upload filereactJS材质UI图标按钮上传文件
【发布时间】：2016-03-28 03:07:39
【问题描述】：

我想知道如何打开目录以使用 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>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我认为来自material 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>

【讨论】：

要在上传时使用文件，您可以在输入元素中添加onChange={(event) => { const files = event.target.files; ... }}。

【解决方案2】：

一些事情：

IconButton 上不需要type='file'，只需输入即可
IconButton 不希望它的子元素是 SVGIcon 以外的任何东西，因此我建议您使用常规按钮
在这种情况下我不会调用 stopPropagation
您的输入类型道具中有错字。你有type="file type='file'。应该只是type="file"

所以，把所有这些放在一起：

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

如果您仍然希望它是图标而不是按钮，我怀疑您可以使用 <input> 做一些事情，或者将其作为子项添加到不带标签的 FlatButton。

【讨论】：

注意：您的隐藏文件输入可能不会占用按钮容器的全部高度/宽度，并且在文件输入之外单击按钮时不会执行任何操作。

【解决方案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} />

【讨论】：