Désactiver un lien en React #
Définissez la propriété CSS des événements de pointeurs sur none pour désactiver un lien dans React, par ex.
<Link style={{pointerEvents: 'none'}}>. Lorsque la propriété « pointer events » de
le lien est défini sur nonele lien est désactivé.
import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
export default function App() {
const [count, setCount] = useState(0);
return (
<Router>
<div>
<Link style={{pointerEvents: count === 0 ? '' : 'none'}} to="/">
Home
</Link>
<br />
<br />
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
</Router>
);
}
Lorsque l’utilisateur clique sur le bouton, la fonction
pointer-events
de l’élément de lien est définie comme suit none et le lien est désactivé.
Vous pouvez utiliser la même approche pour désactiver un élément d’ancrage, car sous le capot, l’élément
capot, l’élément Link n’est en fait qu’un élément <a> étiquette.
L’exemple utilise un opérateur
opérateur ternaire,
qui est très similaire à un if/else déclaration.
Si la valeur à gauche du point d’interrogation est véridique, l’opérateur retourne la valeur à gauche du deux-points, sinon la valeur à droite du deux-points est retournée.
Une autre approche pour désactiver un lien consiste à rendre simplement un élément différent à la place du lien si une condition est remplie.
différent à la place du lien si une condition est remplie.
import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
export default function App() {
const [count, setCount] = useState(0);
return (
<Router>
<div>
{count === 0 ? (
<Link to="/">
Home
</Link>
) : (
<span>Home</span>
)}
<br />
<br />
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
</Router>
);
}
Cette fois-ci, si une certaine condition est remplie, nous rendons un élément span au lieu de
un lien.
Il n’est pas nécessaire que ce soit un span, cela peut être n’importe quel autre élément qui convient à votre
cas d’utilisation.
Cet exemple utilise également un opérateur ternaire : si l’élément count est égale à
à 0nous rendons un lien, sinon nous rendons un span tag.
Vous pouvez également désactiver le lien en ajoutant une balise onClick à l’élément
et en appelant la fonction preventDefault() sur l’élément event objet.
import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
export default function App() {
const [count, setCount] = useState(0);
return (
<Router>
<div>
{count === 0 ? (
<Link to="/about">About</Link>
) : (
<Link to="/about" onClick={event => event.preventDefault()}>
About
</Link>
)}
<br />
<br />
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
</Router>
);
}
Nous avons ajouté un onClick pour le deuxième Link élément.
Le site
preventDefault
de l’objet event indique au navigateur que son action par défaut ne doit pas
pas être prise.
L’action par défaut lorsqu’on clique sur un lien est de naviguer vers une autre page.
En appelant preventDefault()le lien est désactivé.
Vous pouvez ajouter des styles en ligne aux deux liens pour permettre à l’utilisateur de savoir plus facilement quand le lien est désactivé et quand il est actif.
savoir quand le lien est désactivé et quand il est actif.
import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
export default function App() {
const [count, setCount] = useState(0);
return (
<Router>
<div>
{count === 0 ? (
<Link to="/about">About</Link>
) : (
<Link
style={{pointerEvents: 'none', textDecoration: 'none'}}
to="/about"
onClick={event => event.preventDefault()}
>
About
</Link>
)}
<br />
<br />
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
</Router>
);
}