React-hook-form：重置/清空输入文件

Question

我是 React 新手，我想创建一个按钮来重置/清空输入文件以实现编辑功能。我正在使用 MUI 和 React-hook-form。当我单击重置按钮时，图像已经更改，并且输入文件也显示“未选择文件”，但是当我单击提交按钮时，文件仍然存在并发送到我的后端。但是，它应该为空，因此不会发送到后端。

我尝试使用 useRef 并将输入文件的值设置为 null，我尝试使用 console.log 进行检查，并且该值为 null。但发送的值仍然是我上传的最新图片。这是我的完整代码：

import React, { useState, useEffect, useRef } from "react";
import { Box, TextField, IconButton } from "@mui/material";
import LoopIcon from "@mui/icons-material/Loop";
import { Controller } from "react-hook-form";

export default function MyInput(props) {
  const { name, control, label, width, image } = props;
  const [file, setFile] = useState();
  const [old, setOld] = useState();
  const inputFile = useRef(null);

  const handleReset = () => {
    if (inputFile.current) {
      inputFile.current.value = null;
      document.querySelector(".image").src = old;
    }
  };

  useEffect(() => {
    setOld(document.querySelector(".image").src);
  }, []);

  return (
    <Box sx={{ width: { width } }}>
      <Controller
        name={name}
        control={control}
        render={({ field: { onChange, value }, fieldState: { error } }) => (
          <>
            <Box>
              <TextField
                inputRef={inputFile}
                sx={{ maxWidth: "75%" }}
                onChange={(e) => {
                  onChange(e.target.files[0]);
                  setFile(URL.createObjectURL(e.target.files[0]));
                }}
                id="outlined-basic"
                label={label}
                variant="outlined"
                value={value?.fileName}
                type="file"
                InputLabelProps={{
                  shrink: true,
                  accept: "image/png, image/jpeg",
                }}
                error={!!error}
                helperText={error?.message}
              />
              <IconButton onClick={handleReset}>
                <LoopIcon />
              </IconButton>
            </Box>
            <img
              className="image"
              src={file ? file : image}
              alt={file ? "Error: Image cannot be displayed" : undefined}
              style={{ maxWidth: "100%", height: "auto", marginTop: "20px" }}
            />
          </>
        )}
      />
    </Box>
  );
}

知道如何在单击重置按钮时使输入文件的值变为空吗？我缺少什么。谢谢您的帮助。

Answer 1

首先，你不需要在 React 中使用 vanillajs 选择器，我希望你将其用作“最后的手段”。

您正在使用

react-hook-form

，因此无需自己管理状态。

我对 MUI 不熟悉，所以我不确定

<TextField />

到底是如何工作的。

在我看来，如果您使用类似

react-hook-form

之类的东西，您需要在那里重置数据，而不是在本地输入中使用一些硬编码

useState()

我需要有关此组件外部实现的更多信息，但基本上，来自

useForm()

的

react-hook-form

钩子有一个

resetField()

和

reset()

方法，您可以访问它们来“重置”此数据，此外，如果您有权访问到“控制”。

重置：https://react-hook-form.com/docs/useform/reset
重置字段：https://react-hook-form.com/docs/useform/resetfield

那里的

useEffect()

钩子实际上没有任何意义，你可以摆脱它，这里的这 3 个常量也不应该有任何“控制”，你应该用

 控制表单和字段的状态useForm()

>

// these should/can be removed.
const [file, setFile] = useState();
const [old, setOld] = useState();
const inputFile = useRef(null);

如果你有某种codesandbox我可以看一下，也许我可以更详细地介绍这一点。