web-dev-qa-db-fra.com

Dans React, comment définir un clic sur href pour ne rien faire?

J'ai l'élément html suivant:

<a href onClick={() => fields.Push()}>Add Email</a>

J'ai besoin de l'attribut href afin d'amorcer styles avec l'élément avec un style de lien (couleur, curseur).

Le problème, c'est que si je clique dessus, le navigateur est redirigé. Comment puis-je mettre à jour ce qui précède pour ne pas rediriger le navigateur onClick mais toujours exécuter fields.Push ()

Merci

javascripttwitter-bootstrapreactjsbootstrap-4
7
AnApprentice

Vous devriez envisager la méthode d'écriture clickHappens dans le composant react au lieu d'écrire ceci en ligne. Esperons que ça marche!

<a href onClick={(e) => {e.preventDefault(); fields.Push()}}> Add Email </a>
4
Jan Ciołek

Vous devriez appeler preventDefault function depuis onClick event comme ceci:

class App extends React.Component {
  onClick = (e) => {
    e.preventDefault()
    console.log('onclick..')
  }
  render() {
    return (
      <a href onClick={this.onClick} >Click me</a>
    )
  }
}

Vous pouvez utiliser quelque chose comme ceci dans votre cas d'utilisation:

    const renderEmails = ({ fields }) => (
      ...
      <a href onClick={(e) => {
        e.preventDefault()
        fields.Push()
      }}>Add Email</a>
      ...
    )
6
Ritesh Bansal

ajouter javascript: void (0):

<a href="javascript:void(0);" onClick={() => fields.Push()}>Add Email</a>
1
Ashu