React Material UI-制作一个按钮打开文件选择器窗口

Question

React Material UI-制作一个按钮打开文件选择器窗口

我有一个样式化的 Material UI 按钮组件。我想做到这一点，以便当我单击样式按钮时我可以选择计算机上的文件。

我认为这可以通过将for a （文件输入）元素放置在<Button></Button>内部来完成。但这似乎只适用于 div 而不是按钮。我既无法为常规按钮元素打开文件选择器，也无法为材质 UI 按钮组件打开文件选择器。<label><input type="file"/>

如何让材质 uiButton充当文件输入的标签？

import React from 'react';

import { Button } from '@material-ui/core';
export default function InputButton() {
  return (
    <div>

    {/* Button does not open file picker window */}
      <div>
        <label>
          <input type="file" style={{ display: 'none' }} />
          <Button>upload file</Button>
        </label>
      </div>

    {/* div does open file picker window */}
      <div>
        <label>
          <input type="file" style={{ display: 'none' }} />
          <div>upload file</div>
        </label>
      </div>

    </div>
  );
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

95f*_*973 13

在您的组件中有一个绑定到 ofinput类型的内部引用file。onClickMUI 的Button，引用input并模拟单击它

function InputButton() {

  const fileInput = React.useRef();

  return (
    <div>
      <Button 
        variant="contained" 
        color="primary" 
        onClick={()=>fileInput.current.click()}
      >
        upload file
      </Button>

      <input 
        ref={fileInput} 
        type="file" 
        style={{ display: 'none' }} 
      />
    </div>
  );
}

ReactDOM.render(<InputButton/>, document.getElementById("root"));

Run Code Online (Sandbox Code Playgroud)

<body>
  <div id="root"></div>
  
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { Button } = MaterialUI;
  </script>
</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年前
查看次数：	13547 次
最近记录：	3 年，8 月前