0

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

Я сделал так. 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 (
    <></>
)

}

1
  • Сама идея кликать в одном, а функцию запускать в другом компоненте уже сама по себе странная... Мне кажется все это притянуто за уши. Что хоть та функция будет делать?
    – ksa
    14 июл в 20:15

2 ответа 2

0

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

0

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.