javascript - 有没有办法在另一个组件中调用从 FileInput 上传的图像？

Question

我正在使用 Grommet，我创建了两个 FileInputs，并从他们得到的图像中生成了一个新图像。我的问题是：有没有办法调用我从按钮中的 FileInput 获得的图像？如果是，如何？感谢您的任何回答。

代码（取出一些不相关的垃圾）：

function App() {
  function merge(pfpImage, overlayImage) {
    const pfpDimensions = sizeOf(pfpImage);
    const overlayDimensions = sizeOf(overlayImage);

    if (pfpDimensions == overlayDimensions) {
      return mergeImages([pfpImage, overlayImage]);
    } else {
      window.alert("Make sure the images have the same dimensions.");
    }
  }

  var mergedImage;

  return (
    <Grommet theme={theme}>
      <Header background="neutral-3" pad="medium" height="xsmall">
        <Anchor label="Social Ribbon" icon={<Image className="logoImage" a11yTitle="Social Ribbon Logo" src={logo} />} />
      </Header>
      <Main direction="column" pad="medium" gap="medium">
        <Box direction="row" gap="large">
          <Box direction="column" gap="medium">
            <Box direction="row" gap="small">
              <Text>Profile Picture: </Text>
              <FileInput
                name="pfp"
                multiple={false}
                onChange={event => {
                  const fileList = event.target.files;
                  for (let i = 0; i < fileList.length; i += 1) {
                    const pfpFile = fileList[i];
                  }
                }}
              />
            </Box>
            <Box direction="row" gap="small">
              <Text>Overlay: </Text>
              <FileInput
                name="overlay"
                multiple={false}
                onChange={event => {
                  const fileList = event.target.files;
                  for (let i = 0; i < fileList.length; i += 1) {
                    const overlayFile = fileList[i];
                  }
                }}
              />
            </Box>
          </Box>
          <Box>
            <Image src={mergedImage} />
          </Box>
        </Box>
        <Button primary size="small" label="Put overlay" onClick={mergedImage = merge(pfpFile, overlayFile)} />
      </Main>
    </Grommet>
  )
}