迹忆客 专注技术分享

要在 React 中单击按钮打开文件输入框：

1. 在按钮元素上设置 onClick 属性。
2. 在文件输入上设置 ref 属性。
3. 单击按钮时，打开文件输入框，例如 inputRef.current.click()。

App.js

import {useRef} from 'react';

const App = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    // 👇️ open file input box on click of other element
    inputRef.current.click();
  };

  const handleFileChange = event => {
    const fileObj = event.target.files && event.target.files[0];
    if (!fileObj) {
      return;
    }

    console.log('fileObj is', fileObj);

    // 👇️ reset file input
    event.target.value = null;

    // 👇️ is now empty
    console.log(event.target.files);

    // 👇️ can still access file object here
    console.log(fileObj);
    console.log(fileObj.name);
  };

  return (
    <div>
      <input
        style={{display: 'none'}}
        ref={inputRef}
        type="file"
        onChange={handleFileChange}
      />

      <button onClick={handleClick}>Open file upload box</button>
    </div>
  );
};

export default App;

我们使用 useRef 挂钩来访问文件输入元素。

请注意 ，我们必须访问 ref 对象的 current 属性才能访问我们设置 ref 属性的文件输入元素。

当我们将 ref prop 传递给元素时，例如，React 将 ref 对象的 .current 属性设置为对应的 DOM 节点。

我们可以调用 click() 方法，例如 ref.current.click() 模拟鼠标点击文件输入元素。

当在元素上使用 click() 方法时，它会触发元素的单击事件。当文件输入的点击事件被触发时，文件上传对话框打开。

请注意 ，我们将文件输入的 display 属性设置为 none 以隐藏它。

现在，当用户单击按钮元素时，我们使用 ref 对象模拟对文件输入的单击，文件上传框打开。

这种方法适用于任何类型的元素，例如一个 div 或一个图标。只需在元素上设置 onClick 属性并在单击元素时模拟对文件输入的单击。