如何在反应中清除文件类型输入字段的文件名答案

【问题标题】：How to clear file type input field's file name in react如何在反应中清除文件类型输入字段的文件名
【发布时间】：2021-12-18 10:37:36
【问题描述】：

在这个输入框中，它只接受视频文件。如果我尝试上传任何其他文件，请启用所有文件选项。它会显示一个警报。这工作正常，但在添加任何其他格式文件后，当它检查它不是视频文件时，它会显示警报，但文件名仍保留在输入字段中。

我想清除输入字段文件名和e.target.files。这是我的代码...

<Label for="exampleFile">Upload Video</Label>
      <MyInput
        type="file"
        name="file"
        accept="video/*"
        id="exampleFile"
        label="Upload a Video"
        onChange={(e) => {
          let files = e.target.files;

          let file = files[0];
          let name = files[0].name;
          let type = files[0].type;

          if (!file.type.match("video.*")) {
            alert("You Can't upload a video file ");
          } else {
            // some code
          }
        }}
      />

当我上传任何其他格式时，它会显示警报，点击OK 按钮后，它会显示....

文件名仍在输入字段中。我必须重置它。

我试过...

document.getElementById('exampleFile').value = null

useRef()

添加了value 属性和useState() 但没有任何效果。

谁能帮我解决这个问题...

【问题讨论】：

你为什么使用MyInput而不是简单的input标签？尝试在其上使用相同的方法时，使用另一个组件而不是简单的 HTML 输入时，您可能会遇到问题。
它只是一个自定义组件，
我猜 id exampleFile 不适用于您想要的输入字段，但它只是您的自定义组件上的一个属性。错误信息是什么？

标签： javascript reactjs typescript input

【解决方案1】：

尝试为文件输入设置一个关键属性，然后当你需要重置它时更新关键属性值：

  resetsFileInput() {
      let randomString = Math.random().toString(36);
     setInputKey(randomString)
     
    }

       <Label for="exampleFile">Upload Video</Label>
       <MyInput
        type="file"
        key={InputKey || '' } />
        name="file"
        accept="video/*"
        id="exampleFile"
        label="Upload a Video"
        onChange={(e) => {
          let files = e.target.files;

          let file = files[0];
          let name = files[0].name;
          let type = files[0].type;

          if (!file.type.match("video.*")) {
            alert("You Can't upload a video file ");
          } else {
              resetsFileInput()

            // some code
          }
        }}
      />

【讨论】：