вызов обработчика событий из одного компонента в другом компоненте

Question

есть компонент

function App() {
  const handleClick= () => {
    const popupOpen = document.querySelector('.popup');
    popupOpen.classList.add('popup_open')
  };

  return (
    <>
      <div className="page">
        <Header />
        <Main />
        <Footer />
      </div>
   </>
)}

в компоненте Main

function Main() {
  return (
    <main className="content">
      <section className="main">
          <button
            type="button"
            className="button"
            onClick={handleClick}
          ></button>
    </main>
  )
};

Я перенес обработчик событий из компонента Main в компонент App. При этом, я хочу чтобы он продолжал вызываться из компонента Main.

нужна Ваша помощь как это реализовать, передав ее в Main с помощью нового пропса например onEdit

Answer 1

Можно сделать так:

В компоненте Арр, пробросьте её компоненту Main <Main handleClick = {handleClick}/>
Получите функцию в компоненте Main из пропсов и вызывайте её при нажатии на кнопку onClick={() => props.handleClick()}

Получить доступ к пропсам в Main можно так Main(props)

Но работать напрямую с дом элементами используя реакт, не всегда хорошая идея. Это я про саму функцию handleClick

БЛОГ НА HUSL

вызов обработчика событий из одного компонента в другом компоненте

Ответы (1 шт):