1
votes

Comment renvoyer un attribut d'élément cliqué dans React?

Je me demandais s'il existe un moyen simple d'obtenir un attribut d'élément sur lequel l'utilisateur a cliqué dans React.js

function App () { return ( <button title={'foo'} onClick={myFunction(this)} > click me </button> ) } function myFunction(e) { alert(e.getAttribute('title')); }

En ce moment, j'obtiens: TypeError: impossible d'accéder à la propriété "getAttribute", e est indéfini .

J'en ai besoin dans une fonction pour passer l'attribut dans une autre fonction (fonctionnelle) plus tard.

javascript reactjs onclick buttonclick

3 commentaires

Avez-vous essayé e.target.getAttribute ?

@AnuragSrivastava malheureusement oui, il dit: TypeError: Impossible de lire la propriété 'target' d'undefined

Vous n'avez pas besoin de transmettre ceci , cela ne fait pas référence à l'événement de clic

3 Réponses :

1
votes

Vous devez appeler comme ceci

function myFunction(e) {
  alert(e); // e is the value that you have pass 
}

Dans la fonction, vous devez obtenir comme ceci.

<button
    title={'foo'}
    onClick={(e) => myFunction(e.currentTarget.title)}
>
   click me
</button>

1 commentaires

2
votes

Vous pouvez accéder au titre via currentTarget

essayez ceci:

function App () {
    return (
        <button
          title={'foo'}
          onClick={myFunction}
         >
            click me
         </button>
    )
}

function myFunction(e) {
  alert(e.currentTarget.title); 
}

1 commentaires

Wow c'est trop simple :) Merci beaucoup!

1
votes

onClick = {myFunction (this)} signifie que la valeur de onClick prop sera définie sur la valeur renvoyée par myFunction , c'est-à-dire que myFunction (this) est exécuté immédiatement lorsque le code est évalué (et non lorsque le bouton est cliqué). Vous voudrez probablement avoir quelque chose comme onClick = {() => myFunction (this)} à la place, de sorte que la fonction de flèche soit exécutée lorsque le bouton est cliqué (et la fonction de flèche appellera maFonction ).

Cependant, ce est undefined , comme le montre le message d'erreur que vous avez reçu ("e is undefined"), donc vous obtenez l'erreur ( undefined n'a pas de propriété appelée "getAttribute").

Vous pouvez passer l'objet événement à myFunction comme ceci: p>

function myFunction(e) {
  alert(e.currentTarget.getAttribute('title')); 
}

Ensuite, vous pouvez accéder à l'élément button avec e.currentTarget puis obtenir le titre attribut:

onClick={(e) => myFunction(e)}

0 commentaires