React как передать событие в соседний компонент

Question

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

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

Мои два компонента нужно передать событие(клик) из ComponentFirst в ComponentSecind и там вызывть функцию

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

А можно по-подробнее? Кажется, Вы избрали не самый оптимальный путь. Если у вас будет в функции result производиться получение данных, то сам по себе, способ это сделать - очень странный. Сам не профи, но как по-мне, лучше юзать react-redux, или Context самого React. Данные не стоит хранить в состояниях. Гораздо проще законнектить их как пропсы, а событиями прибить их к Redux. Но, повторюсь, - не профи, могу и ошибаться.

Answer 2

Если речь идёт о событие в дочернем компоненте которое должно обновлять состояние в родителя, то самый простой способ передать в дочерний компонент колбэк который будет принимать нужные значения и основываясь на них делать изменения уже в родительском компоненте

Answer 3

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

Х/з как по простоте... Предложу такой вариант.

Хотя сама идея ТСа "кликать в одном, а запускать в другом" не особо понятна... :)

const Second = props => {
  const {isAdded} = props;

  React.useEffect(() => {
      if (isAdded) alert('Вызов из второго компонента')
  }, [isAdded]);

  return <p>Второй</p>
}

const First = ({handleClick}) => { 
  const act = _ => handleClick(new Date)
  return <button onClick={act}>Тест</button>
}

const App = () => {
  const [isAdded, setIsAdded] = React.useState(false);
  const handleClick = status => {
    setIsAdded(status)
  }

  return <div>
    <First handleClick={handleClick} />
    <Second isAdded={isAdded} />
  </div>
}


const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<div id="like_button_container"></div>
<script 
  src="https://unpkg.com/react@18/umd/react.development.js"
  crossorigin></script>
<script 
  src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
  crossorigin></script>

БЛОГ НА HUSL

React как передать событие в соседний компонент

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