Wykluczenie div'a z NavLinku React.js

Question

Napisałem taki komponent:
 

return (
    <NavLink to={`/profile/${inv.user_id._id}`}>
      <div className={styles.invitationContainer}>
        <div className={styles.invitationMessage}>
          <img src={inv.user_id.avatar} />

          <div className={styles.invitationInfo}>
            <b>
              {inv.user_id.name} {inv.user_id.surname}{" "}
            </b>
            wysłał ci zaproszenie do grona znajomych.
            <div className={styles.buttons}>
              <div className={styles.button} onClick={() => acceptInvitation()}>
                Akceptuj
              </div>
              <div className={styles.button} onClick={() => rejectInvitation()}>
                Odrzuć
              </div>
            </div>
          </div>
        </div>
      </div>
    </NavLink>
  );

Ponieważ chciałem, aby gdziekolwiek się na niego nie kliknie przenosiło nas do strony użytkownika. Jedna chciałbym wykluczyć z tego 2 divy które są w div'ie "buttons". Czy jest taka możliwość ? 

Comments

Masz na myśli klikanie w obrębie NavLink?

---

Tak, chcę aby cały komponent był linkiem poza tymi dwoma buttonami (divami), które również są w środku.

Answer 1

Nie jestem pewien, czy w React to zadziała, ale spróbowałbym w ten sposób:

const handleNavLinkClick = (event) {
  if (event.target.classList.contains(styles.button)) { // lub w inny sposób sprawdź, czy kliknięto elementy, które chcesz wykluczyć
    event.preventDefault();
    // event.stopPopagation(); // gdyby powyższe nie zadziałało, można jeszcze wstrzymać dalszą propagację eventu
  }
};

<NavLink to={`/profile/${inv.user_id._id}`} onClick={handleNavLinkClick}>

 

Comments

Dało radę z event.preventDefault().