javascript - 自定义文件选择器字段标签中的按钮

Question

我正在尝试制作自定义文件选择器按钮。所以不用 <input type='file'/>我想要一个可点击的按钮来做同样的事情。

                <input
                  style={{ display: 'none' }}
                  id="raised-button-file"
                  type="file"
                  onChange={this.onFileChange}
                />
                <label htmlFor="raised-button-file">
                  <Button className="shapefile-icon" component = `span`>
                    <PublishIcon/>
                  </Button>
                </label>

我不明白当我删除 component = 'span'这会阻止按钮正常工作。除非我单击按钮周围的标签区域，否则它不再可单击。我很好奇为什么会这样工作以及如何解决这个问题。

Answer 1

而不是放一个 Button在 label 里面, 只需 Button 成为 label使用 component="label" .

就行为的“原因”而言，这与 Material-UI 无关并且行为方式相同 using a plain <button> element . button获取点击的“默认”行为而不是 label .你可以获得span如果你调用 event.preventDefault() 会表现得一样.

import React from "react";
import ReactDOM from "react-dom";

import Button from "@material-ui/core/Button";
import PublishIcon from "@material-ui/icons/Publish";

function App() {
  return (
    <div className="App">
      <input
        style={{ display: "none" }}
        id="raised-button-file"
        type="file"
        onChange={() => {}}
      />
      <Button
        htmlFor="raised-button-file"
        className="shapefile-icon"
        component="label"
      >
        <PublishIcon />
      </Button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);