Javascript 按住input type=file的onClick，执行我想要的操作，然后让浏览器启动一个文件对话框？

我想在单击

时显示自定义警告消息，然后让浏览器通过单击“确认”按钮启动文件选择对话框。这是为了确保用户正确地意识到警告消息。可能吗

import React from "react";
import "./styles.css";

export default function App() {
  const [warn, setWarn] = React.useState(false);
  const inputRef = React.useRef();

  const handleChange = e => {};

  const handleClick = e => {
    if (!warn) {
      setWarn(true);
      e.preventDefault();
    }
  };

  const handleContinue = e => {
    const event = new Event("input", { bubbles: true });
    inputRef.current.dispatchEvent(event);
  };

  return (
    <div className="App">
      {warn ? (
        <div>
          <h1>WARNING MESSAGE...</h1>
          <button onClick={handleContinue}>Confirm</button>
        </div>
      ) : (
        ""
      )}
      <label htmlFor="test-input">
        <input
          id="test-input"
          ref={inputRef}
          type="file"
          onChange={handleChange}
          onClick={handleClick}
        />
      </label>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
导出默认函数App（）{
const[warn，setWarn]=React.useState（false）；
const inputRef=React.useRef（）；
常量handleChange=e=>{}；
常量handleClick=e=>{
如果（！警告）{
设置警告（真）；
e、 预防默认值（）；
}
};
常量handleContinue=e=>{
const event=新事件（“输入”{bubbles:true}）；
inputRef.current.dispatchEvent（事件）；
};
返回(
{警告(
警告消息。。。
证实
) : (
""
)}
);
}

您可以使用

输入触发文件选择器。单击（）

，但这也会将

事件.isTrusted

更改为false，因为它不是由用户交互手动触发的

picker.onclick=evt=>{
evt.isTrusted&&evt.preventDefault（确认（'you sure？'）&&evt.target.click（））
}

---

单击输入时，检查单击事件是由浏览器还是通过脚本触发的。当浏览器触发“单击”事件时，将为true，因此在这种情况下，使用以防止打开“文件”对话框

然后编写执行您希望执行的操作的代码，并最终调用以再次触发click事件，但这次

event.isTrusted

将为false，因此不会阻止打开文件对话框

请记住，在打开文件对话框之前，要执行的代码应该在

else

块中。否则，它将执行两次

const input=document.querySelector（'input'）；
input.addEventListener（'单击'，（e）=>{
如果（如有锈蚀）{
e、 预防默认值（）；
}否则{
console.log（'doing something…'）；
console.log（'done.Opening file dialog'）；
}
e、 target.click（）；
})

---

谢谢。你的代码给了我解决问题的提示。我将dispatchEvent替换为click（），它成功了！！const handleContinue=e=>{inputRef.current.click（）；}；