javascript - 取消输入类型 ="file"上的事件隐藏

Question

我已阅读 Cancel event on input type="file" ，但是当输入标签被隐藏时这不起作用，焦点不会转到输入标签。
我希望在操作系统文件选择器关闭时重新呈现按钮 - a。在选择任何文件之后，b。无需选择文件并单击取消按钮
附useState/useForceUpdate/useReducer在 Button.onClick或 input.onChange|onClick事件在用户实际选择文件时起作用，但在用户单击取消按钮而不选择文件(或当用户使用键盘单击 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}
        />
    </>
);

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">