Блог

Главная - Вопросы по программированию - Почему функция onClick не срабатывает непосредственно на этом компоненте?

Почему функция onClick не срабатывает непосредственно на этом компоненте?

#reactjs

Вопрос:

Если я помещаю событие onClick непосредственно в компонент React, функция не запускается. Вот пример с функцией setMenuIsOpen, которая не срабатывает при нажатии на компонент бургера.

 
<Burger onClick={() => setMenuIsOpen(!menuIsOpen)} />

Однако, если я оберну компонент в div и переместю событие onClick, событие setMenuIsOpen сработает, как и ожидалось.

 <div onClick={() => setMenuIsOpen(!menuIsOpen)}>
<Burger />
</div>

Может ли кто-нибудь объяснить причину такого поведения и рекомендуемый шаблон для обработки событий щелчка на компонентах? Я предполагаю, что правильный подход состоит в том, чтобы реализовать функцию внутри компонента Burger и передать событие в качестве реквизита. Но кажется немного более интуитивным, что изменение события и состояния должно обрабатываться на один уровень выше.

**Редактировать — Я должен отметить, что мой компонент Burger также содержит событие onclick, которое переключает внешний вид между состоянием «бургер» и состоянием «X». Это прекрасно работает. Проблема возникает, когда я импортирую компонент бургера на страницу и пытаюсь запустить второй компонент меню.

Ответ №1:

Может кто-нибудь, пожалуйста, объяснить причину такого поведения

Похоже Burger , он не ищет и не использует свою onClick опору. Напр.:

 const Burger = () => {
    return <div>Burger</div>;
};

ReactDOM.render(<Burger onClick={() => console.log('click')} />, document.querySelector('.react')); 
 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Напротив, а <div> всегда примет и распознает onClick опору.

рекомендуемый шаблон для обработки событий щелчка по компонентам

Лучшим способом было бы определить дочерний компонент для принятия решения и использовать его onClick :

 const Burger = ({ onClick = () => void 0 }) => {
    return <div onClick={onClick}>Burger</div>;
};

ReactDOM.render(<Burger onClick={() => console.log('click')} />, document.querySelector('.react')); 
 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Если вы не можете изменить дочерний компонент, окружите весь дочерний компонент другим и поместите прослушиватель щелчков на родителя, возможно, это ваш единственный другой вариант.

Метки: