Как получить data-атрибут в React?

Question

У меня есть этот список:

    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>
...

Он регистрирует undefined.

Также пробовал это: console.log(e.target.getAttribute('data-value')) и он возвращает null.

Как получить значение из тега a?

Стек: TypeScript: 3.8.3, React: 16.13.1

Answer 1

В таких фреймворках, как React и Vue, вы обычно избегаете чтения данных из DOM, когда это возможно. В этом случае вы можете зафиксировать значение в функции:

    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>
...

Answer 2

Для этого вы можете использовать следующий код:

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>
  );
}

Answer 3

Элемент

li должен содержаться в элементе a. Попробуйте этот пример

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;

И следуйте совету Росс Аллена