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处理程序会手动触发隐藏文件上传控件的click（）处理程序（输入类型=＆＃34;文件＆＃34;）。隐藏上传控件的引用是通过对其进行ref回调并将该引用存储在＆＃34; this.upload＆＃34;中来获得的。（也可以使用DOM或jQuery来做到这一点，但在React中首选ref）

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

Answer 2

您可以借助<label/>代码

来完成这项工作

<label htmlFor='myInput'>
  <input id="myInput" type="file" style={{visibility: 'hidden'}} />
  <FloatingActionButton
    className="floatingButton"
    backgroundColor='#293C8E'
   >
    <ContentAdd />
   </FloatingActionButton>
</label>

Answer 3

虽然我的解决方案意味着使用多个CSS规则，但我以比Jeff解决方案更复杂的方式解决了这个问题。

我使用了FlatButton，将propsElement设置为＆＃34;标签＆＃34; ：

＆＃13;

const { FlatButton, SvgIcon, MuiThemeProvider, getMuiTheme } = MaterialUI;

class Example extends React.Component {
  render() {
    const buttonStyle = {
       minWidth: '56px',
       width: '56px',
       minHeight: '56px',
       height: '56px',
       borderRadius: '28px',
     };
  
    return (
      <div>
        <FlatButton
          containerElement="label"
          backgroundColor='#293C8E'
          style={buttonStyle}
          >
          <input type="file" style={{ display: 'none' }} />
        </FlatButton>
      </div>
    );
  }
}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme() }>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

＆＃13;

<script src="https://unpkg.com/react@15.2.1/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@15.2.1/dist/react-dom.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<div id="container"></div>

＆＃13;

此处有更多详情：https://stackoverflow.com/a/36262984/2590861

在凸起的按钮材料ui上

3 个答案: