在凸起的按钮材料ui上打开"选择文件"对话框

Question

我的反应项目中有一个浮动按钮(材料ui).我想点击它时打开"选择文件"对话框.我没有得到任何解决方案.我试过这样做但没有用.我不想使用jquery.

</div>
            <input id="myInput" type="file" style="visibility:hidden" />
            <FloatingActionButton className="floatingButton" backgroundColor='#293C8E' onClick ="$('#myInput').click();">
                <ContentAdd />
            </FloatingActionButton>
        </div>

有人可以告诉我我到底需要做什么吗？

Answer 1

基本示例(不包括如何处理所选文件):

  <div>
    <input id="myInput" type="file" ref={(ref) => this.upload = ref} style={{ display: 'none' }} />
    <FloatingActionButton
      className="floatingButton"
      backgroundColor='#293C8E'
      onClick={(e) => this.upload.click() }
      >
      <ContentAdd />
    </FloatingActionButton>
  </div>

因此,您的FloatingActionButton的onClick处理程序手动触发隐藏文件上载控件(input type ="file")的click()处理程序.隐藏上传控件的引用是通过对其进行ref回调并将该引用存储在"this.upload"中获得的(也可以使用DOM或jQuery来执行此操作,但在React中首选ref)

这是一个有效的jsFiddle:https://jsfiddle.net/432yz8qg/58/