«Реагировать» как передать событие соседнему компоненту

Question

Мне нужно щелкнуть кнопку в одном компоненте и по этому щелчку вызвать функцию из соседнего. Какой самый простой способ?

Я реализовал вот так. https://stackblitz.com/edit/react-l5beyi Но я думаю, у вас получится намного проще. React для меня в новинку, и эта конструкция выглядит странно ...

const App = () => {
  const [isAdded, setIsAdded] = useState(false);

  function handleClick(status) {
    setIsAdded(status)
  }

  return (
    <div>
      <ComponentFirst
        HandleClick={handleClick}
      />
      <ComponentSecond
        isAdded={isAdded}
        handleCreate={handleClick}
      />
    </div>
  );
}

const ComponentFirst = ({ HandleClick }) => {
  return (
    <button
      onClick={HandleClick}
    >button</button>
  )
}

const ComponentSecond = (props) => {
  let { isAdded, handleCreate } = props;
  const result = () => {
    alert('work')
    console.log('work')
  }

  React.useEffect(() => {
    if (isAdded) {
      result()
      handleCreate(false);
    }
  }, [isAdded, handleCreate]);

  return (
    <></>
  )
}

Answer 1

Вы также можете использовать CustomEvent , которое может прослушивать любой компонент.

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  return (
    <div>
      <ComponentFirst />
      <ComponentSecond />
    </div>
  );
}

const ComponentFirst = () => {

  const handleClick = (e) => {
    // Create the event.
    const event = new CustomEvent("myCustomEventName", {
      detail: "Some information"
    });

    // target can be any Element or other EventTarget.
    window.dispatchEvent(event);
  };

  return <button onClick={handleClick}>button</button>;
};

const ComponentSecond = (props) => {
  function eventHandler(e) {
    console.log("Dispatched Detail: " + e.detail);
  }

  //Listen for this event on the window object
  useEffect(() => {
    window.addEventListener("myCustomEventName", eventHandler);

    return () => {
      window.removeEventListener("myCustomEventName", eventHandler);
    };
  });

  return <></>;
};

Answer 2

В вашем (надуманном, я полагаю) примере второй компонент ничего не отображает, поэтому его не существует. Работу должен выполнять родительский компонент:

const App = () => {
  const handleClick = React.useCallback((status) => {
    alert(`work ${status}`);
    // or maybe trigger some asynchronous work?
  }, []);

  return (
    <div>
      <ComponentFirst handleClick={handleClick} />
    </div>
  );
};

const ComponentFirst = ({ handleClick }) => {
  return <button onClick={() => handleClick("First!")}>button</button>;
};