如何取消input type="file" hidden元素上的事件？

Question

我已经阅读了取消input type="file"上的事件，但是当input标签隐藏时，它不起作用，焦点不会转到input标签。

我希望在操作系统文件选择器关闭后重新渲染按钮 - a. 在选择任何文件之后，b. 在没有选择文件并单击取消按钮之后

将useState/useForceUpdate/useReducer附加到或事件上，当用户实际上选择文件时有效，但是当用户未选择文件并点击取消按钮（或使用键盘按Esc键）时无效。

input.onFocus不会触发。是否有一种方法可以在用户完成文件选择器关闭而没有选择文件（取消/Esc键）时重新渲染按钮？

const [, forceUpdate] = React.useReducer((x) => x + 1, 0);

return (
    <>
        <input
            type="file"
            ref={uploadRef}
            id={`${toolbarButtonId}`}
            accept={acceptParams}
            onChange={onClickEvent}
            onClick={onClick}
            hidden
            onFocus={forceUpdate}
        />
        <Button
            ariaLabel={ariaLabel}
            ariaDescription={ariaDescription}
            disabled={disabled}
            iconName={iconName}
            id={toolbarButtonId}
            position={position}
            onClick={fileUploadRefLink}
            {...props}
        />
    </>
);

- unknown_boundaries

---

https://www.google.com/amp/s/www.geeksforgeeks.org/how-to-detect-when-cancel-is-clicked-on-file-input-using-javascript/amp/ - Harshit Agarwal

当输入框被隐藏时，onfocus事件不会被触发。 - unknown_boundaries

请添加最小代码的codesandbox，以便进行故障排除。 - Observer

这样的流程是否可行？使用可见按钮来触发一个函数，该函数会点击输入框，同时仍然提供一个onChange事件以便您可以处理输入框中的内容：https://dev59.com/EVQK5IYBdhLWcg3wVuis - Anders Elmgren

Answer 1

您可以在窗口上添加一个聚焦事件，以便在用户关闭文件输入对话框后观察其何时重新获得焦点。

let button = document.querySelector("button");
let input = document.querySelector("input");

let renderCount = 0;
    
let pageRefocused =  () => {
  button.textContent = `User closed the dialog ${++renderCount} times`;
  window.removeEventListener("focus", pageRefocused);
};

button.addEventListener("click", () => {
  input.click();
  // we watch the window after opening the file input dialog
  window.addEventListener("focus",pageRefocused); 
});

input {
  visibility:hidden;
}

<button>Upload a file</button><input type="file">

- mwryl

---

只是出於好奇，.click()在Safari上能用嗎？我記得以前做過類似的事情，但Safari不太喜歡“假”的點擊。 - Sheraff

我没有Mac来测试，但它在我的iPad上运行正常。 - mwryl