React - 从父级单击子组件中的输入

Question

如何从父组件单击子组件中的输入（打开文件对话框）？ 这就是我所拥有的，但我不太确定如何在点击处理程序中将其带回家。

import React, { createRef } from 'react';
const inputRef = createRef();

// Parent ==============
const Parent = () => {
  const handleClick = () => {
    // open file dialog in child
  };
  return (
    <>
      <Child />
      <button onClick={handleClick}></button>
    </>
  );
};

// Child ==============
const Child = () => {
  return (
    <>
      <input type="file" ref={inputRef} />
    </>
  );
};

Answer 1

我使用 forwardRef 将 ref 从父级传递给子级。

import React, { createRef } from 'react';
const inputRef = createRef();

// Parent ==============
const Parent = () => {
  const handleClick = () => {
    inputRef.current.click();
  };
  return (
    <>
      <Child ref={inputRef}/>
      <button onClick={handleClick}></button>
    </>
  );
};

// Child ==============
const Child = React.forwardRef((props, ref) => {
  return (
    <>
      <input type="file" ref={ref} />
    </>
  );
});

Answer 2

只需使用inputRef.current.click(); 在您的 handleClick 方法中。

import React, { createRef } from 'react';
const inputRef = createRef();

// Parent ==============
const Parent = () => {
  const handleClick = () => {
    inputRef.current.click();
  };
  return (
    <>
      <Child />
      <button onClick={handleClick}></button>
    </>
  );
};

// Child ==============
const Child = () => {
  return (
    <>
      <input type="file" ref={inputRef} />
    </>
  );
};