仅使用输入字段上传文件 - React Hook Form答案

【问题标题】：Uploading a file using only the input field - React Hook Form仅使用输入字段上传文件 - React Hook Form
【发布时间】：2021-01-20 07:46:03
【问题描述】：

我是我的应用程序，我有一个文件输入来提交文件并将其发送到 Firebase 存储桶。我正在为这个任务使用 react-hook-form 库。问题是，我想通过只有输入元素来上传文件，我不想有一个按钮来提交它。这都与样式有关，我可以制作一个提交按钮，它肯定会起作用。我看到一个视频，作者展示了如何创建此功能，甚至将其与 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;

要查看 firebase 实现，您可以查看link

【问题讨论】：

没有提交按钮的意思是说一旦用户选择了文件就应该将文件上传到服务器吗？
是的，这就是我想要的

标签： javascript reactjs forms input next.js

【解决方案1】：

您基本上必须在输入的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"))

【讨论】：

【解决方案2】：

那些不熟悉 REACT HOOK FORM 并且需要渲染特定字段的 OnChange 的人，然后使用 useForm 方法中的 watch。

const methods = useForm();
methods.watch(); // to render on all fields change
methods.watch(['fieldName1', 'fieldName2' ]); // to render on a particular field onChange

【讨论】：