Javascript 仅使用输入字段-React Hook表单上载文件

我是我的应用程序，我有一个文件输入来提交文件并将其发送到firebase存储桶。我正在使用react钩子表单库执行此任务。问题是，我只想通过输入元素来上传文件，我不想有一个按钮来提交它。这是所有有关的风格，我可以做一个提交按钮，它肯定会工作。我看过一段视频，作者展示了如何创建此功能，甚至如何将其与firebase集成，但他有一个提交按钮

这就是我父亲是怎么做的

import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit } = useForm() 

  const onSubmit = (data) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input ref={register} type="file" name="picture" />
      <button>Submit</button>
    </form>
  );
}

export default App;

从“React”导入React；
从“react hook form”导入{useForm}；
函数App（）{
常量{register，handleSubmit}=useForm（）
const onSubmit=（数据）=>{
console.log（数据）
}
返回(
提交
);
}
导出默认应用程序；

---

要查看firebase实现，您可以选中此项，您基本上必须在输入的

onChange

处理程序中上载文件，而不是表单的

onSubmit

。代码应该如下所示：

function App() {
  const onChange = (e) => {
    const storageRef = app.storage().ref();
    const fileRef = storageRef.child(e.target.files[0].name);
    fileRef
      .put(e.target.files[0])
      .then(() => {
        console.log('Uploaded a file');
      });
  }

  return (
    <form>
      <input type="file" onChange={onChange} />
    </form>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))

函数应用程序（）{
const onChange=（e）=>{
const storageRef=app.storage（）.ref（）；
const fileRef=storageRef.child（e.target.files[0].name）；
fileRef
.put（e.target.files[0]）
.然后（（）=>{
log（'上传了一个文件'）；
});
}
返回(
);
}
ReactDOM.render（，document.querySelector（“#app”））

如果没有“提交”按钮，您的意思是一旦用户选择了文件，就应该将文件上载到服务器吗？是的，这正是我想要的