javascript - How to make a button inside of the anchor tag clickable in React? - Stack Overflow

admin管理员组

文章数量:1345107

I know that some relevant questions exist but none of them really has an answer more than saying that it is not possible. What I would like to achieve is having a dropdown button inside of an anchor tag so that user can be redirected on click but also has a possibility to interact with the button itself since it is a multiple-choice dropdown. Right now, once the user clicks on the button, the anchor tag redirects the user without having any effect on the button.

Just to give you an idea of what the code looks like, here is the minimal reproduction:

  <a href="some_location">
          <span>Some text</span>

          <div>
            <button>My Dropdown button</button>
          </div>
        </a>

I know that some relevant questions exist but none of them really has an answer more than saying that it is not possible. What I would like to achieve is having a dropdown button inside of an anchor tag so that user can be redirected on click but also has a possibility to interact with the button itself since it is a multiple-choice dropdown. Right now, once the user clicks on the button, the anchor tag redirects the user without having any effect on the button.

Just to give you an idea of what the code looks like, here is the minimal reproduction:

  <a href="some_location">
          <span>Some text</span>

          <div>
            <button>My Dropdown button</button>
          </div>
        </a>

• javascript
• reactjs

Share Improve this question Follow edited Feb 1, 2021 at 9:46 Zaid Aly 17322 silver badges1717 bronze badges asked Feb 1, 2021 at 9:42 em_codeem_code 43811 gold badge77 silver badges2020 bronze badges 2

• 1 HTML explicitly forbids nesting such interactive elements into each other. – C3roe Commented Feb 1, 2021 at 9:52
• What could be the solution to achieve the desired result then? – em_code Commented Feb 1, 2021 at 9:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

---

i think it's can help you

const myComp = () => {

handelBtn = (e) => {
    e.stopPropagation();
    // OR
    e.preventDefault();
}
return (
    <a href="some_location">
        <span>Some text</span>

        <div>
            <button onClick={handelBtn}>My Dropdown button</button>
        </div>
    </a>
)
}

I think this can help you.

It works with both <Link> Component and <a> tag. Here <a> tag will be wrapped around the div(card) and div will work as <a> tag when clicked. The button will be above the <a> tag and it is clickable.

const myComp = () => {

return (
    <div class="card">
      <a href="some_location"> </a>
      <span>Some text</span>

      <div>
        <button>My Dropdown button</button>
      </div>
    </div>
)

.card {
    position: relative;
 }
 .card > a {
   position: absolute;
   inset: 0;
 }
 .card  button {
   position: relative;
 }

本文标签： javascriptHow to make a button inside of the anchor tag clickable in ReactStack Overflow