React Hook Form和文件输入的setValue答案

【问题标题】：React Hook Form and setValue of file inputReact Hook Form和文件输入的setValue
【发布时间】：2022-06-13 06:31:36
【问题描述】：

我在使用多个文件选择设置文件输入的值时遇到问题。

在一个表单中，我有两个文件输入字段，一个允许用户仅选择一个文件，第二个允许用户选择多个文件。因此，在将 setValue 应用于单个文件输入时，它可以正常工作并且文件进入状态，但同时，当我尝试为多个文件输入设置值时，我收到以下错误 "Failed to set the ' 'HTMLInputElement' 上的 value' 属性：此输入元素接受一个文件名，该文件名只能以编程方式设置为空字符串。”

 const handleSingle = (file, uploadedData) => {
   setValue("single", file);
   };

   const handleMultiple = (files, data) => {
   setValue('multiple', [...files]);
  };

当然，表单中的“多个”字段应该是一个文件对象数组，但我不知道是什么问题。

【问题讨论】：

好吧，我在文件输入中添加了“value={ undefined }”，可以多选，现在它可以工作了，但不知道为什么以及它有多好。

标签： reactjs react-hook-form

【解决方案1】：

您无法更改“类型”为“文件”的输入值。 input.value 只能由用户设置。

以下情况效果很好，因为您没有更改用户输入。

export default function App() {
  const [v, setV] = useState("");

  return (
    <input
      type="file"
      onChange={(e) => {
        setV(e.target.value);    <--- pass exactly same value
      }}
      value={v}                  <-- not changed
    />
  );
}

我认为你的错误情况是这样的：

export default function App() {
  const [v, setV] = useState("");

  return (
    <input
      multiple
      type="file"
      onChange={(e) => {
        setV(e.target.files);
      }}
      value={v} <-------------- error
    />
  );
}

在这种情况下，您不需要设置值。如果你想将输入与 React 状态同步，你可以设置 'files'

export default function App() {
  const [v, setV] = useState();

  return (
    <input
      multiple
      type="file"
      onChange={(e) => {
        setV(e.target.files);
      }}
      files={v} <-------------- files, not value
    />
  );
}

【讨论】：

但是为什么它适用于单个文件输入呢？
@Vahe 我更新了答案。看看吧。

【解决方案2】：

好吧，我将value={ undefined } 添加到具有多项选择的文件输入中，现在它可以工作了。我不知道它为什么以及有多好，但它确实有效。

【讨论】：