使用清除按钮清除react.useState时遇到问题

Question

我发现很难清除我设置为 setImportFile useState 的文件输入。这是我声明的 useState

const [importFile, setImportFile] = React.useState<File | null>();
const [fileError, setFileError] = React.useState<string>("");

我在这个 const 方法中清除了两个 useState 变量，但只有一个被清除，即 setFileError。

  const clearModal = () => {
        setImportFile(null);
        setFileError("");
    };

我在此方法中使用 setImportFile

 const onChangeImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
        e.preventDefault();
        setImportFile(e.currentTarget.files ? e.currentTarget.files[0] : null);
        setSaving(true);
    };

这是我的渲染，其中我使用清除按钮，只有错误会清除，但文件输入不会清除。我想清空模式中的所有内容

 <Form.Control
     type="file"
     accept='.csv, .xls, .xlsx'
     required
     className="primary mb-3"
     name=""
     onChange={onChangeImportFile}
/>
  <Button variant="secondary" onClick={clearModal} > Clear </Button>

Answer 1

我认为您需要将状态值传递给 Form.Control，以使其受到控制（否则它不会从状态获取其值）。

<Form.Control
  type="file"
  accept='.csv, .xls, .xlsx'
  required
  className="primary mb-3"
  name=""
  value={importFile}
  onChange={onChangeImportFile}
/>

Answer 2

您不需要设置 File | null 因为 SetStateAction 将被设置为 未定义。

试试这个：

const [importFile, setImportFile] = React.useState<File>();
setImportFile(undefined);