Реагировать на клик, не стреляя по дочерним элементам HTML (JSX) - PullRequest
Новая
       35

Реагировать на клик, не стреляя по дочерним элементам HTML (JSX)

0 голосов
/ 10 июня 2018

Фон

Я пытаюсь добавить возможности сортировки в созданную мной таблицу (в стиле начальной загрузки 4).Я использую React в качестве моей платформы.Я знаю, что эти решения существуют в удивительных пакетах, таких как React-Bootstrap-Tables, но они немного излишни для того, чего я хочу достичь, и мне также нравится изучать, как сделать это самостоятельно.

План

Я знаю логику Я напишу , чтобы добиться сортировки.

Проблема

Проблема, с которой я столкнулся, заключается в том, что я не могу определить, по какому столбцу заголовка щелкнул пользователь, поэтому я не могу сообщить своим функциям, по какой сортировке.

Когда я добавляю onClick={} к столбцу заголовка, родительский элемент, кажется, блокирует слушателя.Если я добавлю onClick={} к элементу заголовка, я получу событие, но недостаточно детализированное, чтобы сказать мне, на что я нажал.

В видео, которое я смотрел, рекордер использовал кнопкуHTML-элемент.Когда я использовал это, я все еще не мог заставить onClick={} срабатывать.

ВОПРОС:

Как заставить мой onClick={} работать с дочерним html (jsx) элементом такчто родитель не блокирует слушателя?

Таблица 

<table className="table animated fadeIn ">
                <thead>
                  <tr className="d-flex header-row">
                    <th className="col-4" id="lname">
                      <button onClick={sortTableBy}>Last Name </button>
                    </th>
                    <th className="col-4" id="fname" onClick={sortTableBy}>
                      First Name
                    </th>
                    {this.props.selectedHomework ? (
                      <th className="col-4 animated fadeIn text-center">
                        Homework Checker
                      </th>
                    ) : (
                      <th className="col-4" />
                    )}
                  </tr>
                </thead>
                <tbody>{students}</tbody>
              </table>

Функция 

const sortTableBy = event => {
  console.log("you tried to sort ", event.currentTarget);
};

Когда я пытаюсь сохранить событие в журнале, ничего не происходит, так как onClick toне будет зарегистрирован, так как родительский элемент, кажется, блокирует прослушивание.

Если я помещу это в элемент THEAD, то получу

enter image description here

1 Ответ

0 голосов
/ 10 июня 2018

Хорошо, это была моя ошибка.Я работал над этим кодом в течение некоторого времени.Некоторое время назад я хотел убедиться, что строка заголовка не будет доступна, поэтому я добавил класс, pointer-events: none.Вот почему ничто не зарегистрировалось бы * вздох

...