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

Question

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

我想清除输入字段文件名和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 button.it 后显示....

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

我试过...

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

useRef()

added a value property with useState() but nothing is working.

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

Answer 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
          }
        }}
      />

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

How to clear file type input field's file name in react

javascript

input

typescript

reactjs