Reactjs 如何使用SpeedDial上传文件？

（这似乎被问到了，但我找不到任何关于它是否真的得到了回答的暗示）

MUI有一个很好的创建演示，可以归结为：

我想知道的是如何使用。本质上，

SpeedDialAction

似乎具体化为一个

，但不可能将

SpeedDialAction

包装在一个

中，因为其父级将尝试在其上设置一些道具，但会失败

---

那么，一般来说，如何从快速拨号或晶圆厂中启动文件选择？

据我所知，无法以任何方式添加htmlFor。所以我要做的是添加一个隐藏的输入类型文件，然后向它添加一个ref。然后在单击SpeedDialAction按钮时，我将调用一个处理函数，该函数单击输入参考。如下所示：

const inputRef = useRef();

然后您的SpeedDial操作：

然后最后分析您的实际输入：

---

工作演示：

您可以创建一个包装器组件，将道具转发给SpeedDialAction

function UploadSpeedDialAction(props) {
  return (
    <React.Fragment>
      <input
        accept="image/*"
        style={{ display: "none" }}
        id="icon-button-file"
        type="file"
      />
      <label htmlFor="icon-button-file">
        <SpeedDialAction
          icon={<CloudUploadIcon />}
          tooltipTitle="upload"
          component="span"
          {...props}
        ></SpeedDialAction>
      </label>
    </React.Fragment>
  );
}

功能上传SpeedDialAction（道具）{
返回(
);
}

（未来读者注意：对于v5，在时间允许的情况下，我们希望合理地使用道具而不是上下文来控制儿童，以便准确地解决此类问题。因此，请检查是否仍然需要此解决方案。）

function UploadSpeedDialAction(props) {
  return (
    <React.Fragment>
      <input
        accept="image/*"
        style={{ display: "none" }}
        id="icon-button-file"
        type="file"
      />
      <label htmlFor="icon-button-file">
        <SpeedDialAction
          icon={<CloudUploadIcon />}
          tooltipTitle="upload"
          component="span"
          {...props}
        ></SpeedDialAction>
      </label>
    </React.Fragment>
  );
}