Блог

Главная - Вопросы по программированию - Как заставить React сначала прослушивать событие в дочернем компоненте, а не в родительском компоненте?

Как заставить React сначала прослушивать событие в дочернем компоненте, а не в родительском компоненте?

#javascript #reactjs

Вопрос:

Рассмотрим этот пример

 <div onClick={() => redirectTo('/foo')}>
  <input type="text"/>
  <input type="button" onClick={() => redirectTo('/bar')} />
</div>;

когда я тестирую этот пример в данном случае , нажимая на второй ввод, React всегда перенаправляет на /foo, это нормальное поведение и как я могу перенаправить React на /bar? Большое спасибо!

Комментарии:

1. Помогает ли это? developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

2. @about14sheep на самом деле нет, если событие ввода, инициированное до события div, может быть остановлено, это может помочь!

3. событие щелчка распространяется по DOM. Не ваша функция

4. Другим более конкретным методом было бы developer.mozilla.org/en-US/docs/Web/API/Event/…

5. я не знаю почему, но сначала всегда появляется функция события div (в данном случае перенаправление(‘/foo’)), поэтому я не могу остановить распространение. Так странно!

Ответ №1:

Событие щелчка распространяется от входа к div, и происходят оба перенаправления. Вы видите результат последнего перенаправления.

Вы можете остановить распространение события щелчка ввода.

 <div onClick={() => redirectTo('/foo')}>
  <input type="text"/>
  <input
    type="button"
    onClick={(e) => {
      e.stopPropagation();
      redirectTo('/bar');
    }}
  />
</div>;
Метки: ,