web-dev-qa-db-fra.com

Un moyen plus simple de désactiver le lien dans React?

Je veux désactiver Link dans certaines conditions:

render() {
    return (<li>{this.props.canClick ? 
        <Link to="/">Test</Link> : 
        <a>Test</a>}
    </li>)  
}

<Link> doit spécifier to, donc je ne peux pas désactiver <Link> et je dois utiliser <a>

javascriptreactjshrefreact-router
8
roger

Vous pouvez simplement définir la propriété onClick du lien:

render () {
  return(
    <li> 
    { 
      this.props.notClickable
      ? <Link to="/" className="disabledCursor" onClick={ (event) => event.preventDefault() }>Link</Link>
      : <Link to="/" className="notDisabled">Link</Link>
    }
    </li>
  );
};

Désactivez ensuite l'effet de survol via css à l'aide de la propriété de curseur.

.disabledCursor { 
  cursor: default;
}

Je pense que ça devrait faire l'affaire?

8
Lorenz0

La meilleure solution consiste à utiliser onClick() avec event objet. faites juste ceci dans votre jsx:

<Link to='Everything' onClick={(e) => this._on(e)}

et dans votre _onClick fonction:

_onParent = (e) => {
    e.preventDefault()
}

Exemple complet dans React:

import React, { Component } from 'react'
import {Link} from 'react-router-dom'

export default class List extends Component {
    _onParent = (e) => {
        e.preventDefault()
    }

    render(){
        return(
            <div className='link-container'>
                <Link to='Something' onClick={e => this._onParent(e)}                     
            </div>
        )
    }
}
3
Milad Jafari

Votre code semble déjà assez propre et mince. Je ne sais pas pourquoi vous voulez un moyen "plus simple". Je le ferais exactement comme tu le fais.

Cependant, voici quelques alternatives:

Utilisation des événements de pointeur

Celui-ci est probablement aussi court et doux que possible:

render() {
    return (<li>
      <Link to="/" style={this.props.canClick ? {pointerEvents: "none"} : null}>Test</Link>
    </li>)
}

Utilisation de l'écouteur onClick

Comme alternative, vous pouvez utiliser un générique <a> tag et ajoutez un écouteur onClick pour la condition. C'est probablement mieux adapté si vous avez beaucoup de liens que vous souhaitez contrôler leur état car vous pouvez utiliser la même fonction sur chacun d'eux.

_handleClick = () => {
  if(this.props.canClick) {
    this.context.router.Push("/");
  }
}

render() {
   return (
     <li>
       <a onClick={this._handleClick}>Test</a>});
     </li>
   );  
}

Ce qui précède fonctionnera en supposant que vous utilisez context.router. Sinon, ajoutez à votre classe:

static contextTypes = {
  router: React.PropTypes.object
}

Meilleure version du code OP

Comme je l'ai mentionné ci-dessus, je pense toujours que votre approche est la "meilleure". Vous pouvez remplacer la balise d'ancrage par une étendue, pour vous débarrasser du style d'un lien désactivé (par exemple, curseur de pointeur, effets de survol, etc.).

render() {
    return (<li>{this.props.canClick ? 
        <Link to="/">Test</Link> : 
        <span>Test</span>}
    </li>)  
}
3
Chris

En bref, un moyen plus facile de désactiver le lien dans React?

<Link to="#">Text</Link>
1
Code Lover

Le simple fait de rendre l'URL nulle semble faire l'affaire:

const url = isDisabled ? null : 'http://www.stackoverflow.com';

return (
  <a href={url}>Click Me</a>
);
0
chrismacp

Je pense que vous devriez attribuer to = null pour définir désactiver un lien.

<Link to=null />

Votre code:

render() {
    return (<li>
        <Link to={this.props.canClick?'/goto-a-link':null} >Test</Link>
    </li>)  
}
0
Nguyên Cát Phạm

Qui passe # in to prop au lien devrait faire l'affaire pour vous

Vous pouvez définir le lien selon votre condition. si vous voulez le désactiver, passez simplement # dans props.link

render() {
    return (<li><Link to={props.link}>Test</Link></li>);  
}
0
Mukesh Chandra