Можно как-то получить результат выполнения функции в дочернем компоненте из родительского?

Question

[hemihif370]

У меня есть кнопка в родительском компоненте, мне нужно по нажатии на неё получить результат выполнения функции которая находится в дочернем компоненте...
Можно ли как-то это сделать?
(использую функциональный компонент)

Comments

[Alexandroppolus]

как понимать вот это: "функция, которая находится внутри компонента"?

[hemihif370]

Alexandroppolus, Нууу....))

Это дочерний компонент, мне нужно вернуть результат функции "getCroppedImg" в родительский при нажатии на кнопку

import React, { FC, useState, useRef, useCallback } from 'react';
import ReactCrop, { Crop } from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
import Icon from '../icon/Icon';
import Style from './CropImage.module.scss';

interface ICropImage {
  getCropImage: string;
}

const CropImage: FC<ICropImage> = ({ getCropImage }) => {
  const imgRef = useRef<HTMLImageElement>(null);
  const [crop, setCrop] = useState<Crop>({
    unit: 'px',
    x: 130,
    y: 36,
    width: 320,
    height: 320
  });
  const [imageSrc, setImageSrc] = useState<any>();
  const [image, setImage] = useState<HTMLImageElement>();
  const onSelectFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files.length > 0) {
      const reader = new FileReader();
      reader.addEventListener('load', () => setImageSrc(reader.result));
      reader.readAsDataURL(event.target.files[0]);
    }
  };

  const onLoad = useCallback((evt: any) => setImage(evt.target), []);

  const getCroppedImg = () => {
    if (image) {
      const canvas = document.createElement('canvas') as HTMLCanvasElement;
      const scaleX = image.naturalWidth / image.width;
      const scaleY = image.naturalHeight / image.height;
      canvas.width = crop.width;
      canvas.height = crop.height;

      canvas
        .getContext('2d')!
        .drawImage(
          image,
          crop.x * scaleX,
          crop.y * scaleY,
          crop.width * scaleX,
          crop.height * scaleY,
          0,
          0,
          crop.width,
          crop.height
        );
      return canvas.toDataURL('image/jpeg');
    }
  };
  return (
    <>
      {imageSrc ? (
        <div className={Style.cropWrapper}>
          <ReactCrop
            crop={crop}
            minWidth={250}
            minHeight={250}
            onChange={(c) => setCrop(c)}
            aspect={1 / 1}
          >
            <img ref={imgRef} src={imageSrc} onLoad={onLoad} />
          </ReactCrop>
        </div>
      ) : (
        <label className={Style.inputImage}>
          <input type="file" accept="image/*" onChange={onSelectFile} />
          <Icon id="attach" width={24} height={22} />
          <span>Upload a photo</span>
        </label>
      )}
    </>
  );
};

export default CropImage;

[n1ksON]

hemihif370, ну вынесите эту функцию в родительский компонент и там храните результат. А выполняйте и вызывайте ее из любых дочерних компонентов

[hemihif370]

n1ksON, Этот компонент мне потом нужен будет в нескольких местах, можно это сделать что бы функция осталась в дочернем компоненте?

Что бы функции в родительский не дублировать.....

[n1ksON]

hemihif370, тогда сделайте state в родительском компоненте. а в дочерний передавайте setState. и в нужно функции обновляйте его, чтоб новое значение из дочернего в родительский передавалось

[hemihif370]

n1ksON, Ок, это я сделал, а как мне брать значение из дочернего элемента только по клику?

[hemihif370]

n1ksON, А, ок, тупанул) Спасибо