React 如何从父组件触发子组件内input点击打开文件选择对话框

原代码的问题点 #

• 将inputRef定义在全局作用域，多Child实例共存时会共享同一ref引用，引发逻辑冲突
• 未打通父子组件间的ref传递链路，父组件无法直接获取子组件内部input元素的引用

实现步骤 #

• 在父组件内部创建对应ref，将ref的作用域和当前父组件实例绑定
• 通过props把创建好的ref传递给子组件
• 子组件接收ref后，将其绑定到内部的file类型input上
• 父组件的点击处理函数中，调用ref绑定的input元素的原生click()方法，即可唤起文件选择弹窗

修正后的可运行代码 #

import React, { createRef } from 'react';

// Parent ==============
const Parent = () => {
  // 在父组件作用域内创建ref，避免全局共享冲突
  const inputRef = createRef();

  const handleClick = () => {
    // 可选链判断避免元素未挂载时报错
    inputRef.current?.click();
  };

  return (
    <>
      <Child inputRef={inputRef} />
      <button onClick={handleClick}>选择文件</button>
    </>
  );
};

// Child ==============
const Child = ({ inputRef }) => {
  return (
    <>
      <input 
        type="file" 
        ref={inputRef}
        style={{ display: 'none' }}
      />
    </>
  );
};

补充说明 #

• 原生file input默认会显示固定样式的文件选择控件，实际项目中通常会通过display: none将其隐藏，完全用自定义样式的按钮触发选择逻辑
• 函数组件使用Hooks写法时，可将createRef替换为useRef，逻辑无需改动

内容的提问来源于stack exchange，提问作者Kirk Ross