0
votes

Empêcher la valeur par défaut d'un composant dans React

Comment puis-je empêcher la valeur par défaut (event.preventDefault ()) d'un composant Link dans React si certains états changent, par exemple, si this.state.isActive est false, lorsque je clique sur le lien, rien ne se passe. Voir le code ci-dessous:

`import { Link } from 'react-router';

  return (
     <div>
       {<Link to={link}>
           <img src={someImageUrl} alt={someImageName} />
       </Link>}
     </div>
);`

J'utilise React version 6.

reactjs react-router

0 commentaires

3 Réponses :

0
votes

Vous pouvez en passant une fonction onClick à l'élément enveloppé dans la balise :

import { Link } from 'react-router';

  const link = isActive ? "/somePath" : null

  return (
     <div>
       {<Link to={link}>
           <img src={someImageUrl} alt={someImageName} />
       </Link>}
     </div>
);

EDIT: I mal compris la question

Voici la vraie solution:

import { Link } from 'react-router';

  const prevent = e => {
      e.preventDefault()
      e.stopPropagation()
      // do whatever
  }

  return (
     <div>
       {<Link to={link}>
           <img src={someImageUrl} alt={someImageName} onClick={prevent}/>
       </Link>}
     </div>
);

1 commentaires

La vraie solution où const link = isActive? "/ somePath": null est parfait.

0
votes

Si vous ne voulez pas du tout qu'il se comporte comme un lien, vous pouvez le restituer sous forme de lien ou d'étendue. Par exemple:

<Link to={this.state.isActive ? link : '#'}>...</Link>

Sinon, si cela ne vous dérange pas d'avoir un lien qui ne mène nulle part, vous pouvez faire:

{this.state.isActive ? (<Link to={link}>...</Link>):(<span>...</span>)}

0 commentaires

1
votes

Donnez simplement une fonction onClick au Link Oui c'est possible

import { Link } from 'react-router';

 const isActive = false;

 customFunction(){
   if(isActive){
    this.prop.history.push(link)
  }
 }

  return (
     <div>
       {<Link onClick={customFunction}>
           <img src={someImageUrl} alt={someImageName} />
       </Link>}
     </div>
);

0 commentaires