javascript - How to get data-attribute in React? - Stack Overflow

admin管理员组

文章数量:1355582

I have this list:

    const chosen = (e: any) => console.log(e.target.dataset.value)

...
                <ul>
                  {numbers.map(n => (
                    <a data-value={n} onClick={chosen}>
                      <li key={n}>
                        {n}
                      </li>
                    </a>
                  ))}
                </ul>
...

It logs undefined.

Also tried this: console.log(e.target.getAttribute('data-value')) and it returns null.

How do I get the value from a tag?

Stack: TypeScript: 3.8.3, React: 16.13.1

I have this list:

    const chosen = (e: any) => console.log(e.target.dataset.value)

...
                <ul>
                  {numbers.map(n => (
                    <a data-value={n} onClick={chosen}>
                      <li key={n}>
                        {n}
                      </li>
                    </a>
                  ))}
                </ul>
...

It logs undefined.

Also tried this: console.log(e.target.getAttribute('data-value')) and it returns null.

How do I get the value from a tag?

Stack: TypeScript: 3.8.3, React: 16.13.1

• javascript
• html
• reactjs
• typescript

Share Improve this question Follow edited Jul 13, 2020 at 13:17 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jun 17, 2020 at 15:15 SwixSwix 2,1231111 gold badges3838 silver badges5858 bronze badges 1

• isn't it just element.getAttribute(attributeName); ? – Red Baron Commented Jun 17, 2020 at 15:20

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

In frameworks like React and Vue you generally stay away from reading data from the DOM when possible. In this case, you can capture the value in a function:

    const chosen = (e: any, value: any) => console.log(value)

...
                <ul>
                  {numbers.map(n => (
                    <a key={n} onClick={(event) => { chosen(event, n); }}>
                      <li>
                        {n}
                      </li>
                    </a>
                  ))}
                </ul>
...

You can use the following code to do that:

export default function App() {
  function chosen(event) {
    const meta = event.target.parentNode.getAttribute("data-value");
    console.log(meta);
  }

  return (
    <ul>
      {numbers.map((n) => (
        <a data-value={n} onClick={chosen}>
          <li key={n}>{n}</li>
        </a>
      ))}
    </ul>
  );
}

li element should contentin the a element. Please try this example

import React from "react";

const numbers = [1, 2, 3, 4, 5];

function App() {
  function chosen(event) {
    event.preventDefault();

    console.log(event.target.dataset.value);
  }

  return (
    <ul>
      {numbers.map((number) => {
        return (
          <li key={number}>
            <a href="!#" onClick={chosen} data-value={number}>
              {number}
            </a>
          </li>
        );
      })}
    </ul>
  );
}

export default App;

And follow the Ross Allen advice

Access attributes from the currentTarget instead like this :

console.log(e.currentTarget.getAttribute('data-value'))

本文标签： javascriptHow to get dataattribute in ReactStack Overflow