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

【问题标题】：React Material UI- make a button open a file picker windowReact Material UI-制作一个按钮打开一个文件选择器窗口
【发布时间】：2022-03-15 16:05:59
【问题描述】：

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

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

如何让材质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>
  );
}

【问题讨论】：

标签： html reactjs material-ui

【解决方案1】：

在您的组件中有一个内部引用，该引用绑定到 file 类型的 input。 onClick的MUI 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"));

<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>

【讨论】：

【解决方案2】：

如果标签具有与input 标签的id 匹配的HTML for 属性（JSX htmlFor 属性），并且按钮呈现为span，那么您不需要使用ref模拟点击：

<>
                <input
                  style={{ display: 'none' }}
                  accept="image/*"
                  id={`preview-${inputId}`}
                  type="file"
                />
                <label htmlFor={`preview-${inputId}`}>
                  <Button
                    component="span"
                    size="small"
                    startIcon={<FileOpenIcon />}
                  >
                    Select
                  </Button>
                </label>
</>

【讨论】：

标签在我的情况下不起作用，不知道为什么，可能是因为按钮是 TextField 输入的装饰，而 TextField 创建了自己的标签。我不得不和参考一起去。