取消输入类型=“文件”上的事件隐藏

Question

我读过Cancel event on input type="file"，但是当输入标签被隐藏时这不起作用，焦点不会转到输入标签。

我希望在操作系统文件选择器关闭时重新呈现按钮 - a.在选择任何文件之后，b。无需选择文件并单击取消按钮

当用户实际选择文件时，在 Button.onClick 或 input.onChange|onClick 事件上附加 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}
        />
    </>
);

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