1
votes

Comment obtenir un attribut de données dans React?

J'ai cette liste:

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

Elle enregistre non défini.

Également essayé ceci: console.log (e. target.getAttribute ('data-value')) et il renvoie null.

Comment obtenir la valeur d'une balise une ?

Pile: TypeScript: 3.8.3, React: 16.13.1

javascript reactjs typescript html

1 commentaires

n'est-ce pas seulement element.getAttribute (attributeName); ?

3 Réponses :

2
votes

Dans les frameworks comme React et Vue, vous évitez généralement de lire les données du DOM lorsque cela est possible. Dans ce cas, vous pouvez capturer la valeur dans une fonction:

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

0 commentaires

0
votes

L'élément

li doit être contenu dans l'élément a . Veuillez essayer cet exemple

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;

Et suivez les conseils de Ross Allen

0 commentaires

0
votes

Pour ce faire, vous pouvez utiliser le code suivant:

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

0 commentaires