在React中禁用链接的更简单方法？

Question

我想在某些情况下禁用链接：

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

<Link>必须指定to属性，因此我无法禁用<Link>并且必须使用<a>。

- roger

Answer 1

您可以直接设置链接的onClick属性：

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

然后使用CSS中的cursor属性禁用悬停效果。

.disabledCursor { 
  cursor: default;
}

我想那应该就可以解决问题了？

- Lorenz0

---

如果可能的话，也许你可以编辑你的回答并给出一个在CSS中禁用悬停效果的例子？这将使未来可能不知道如何做到这一点的新用户更容易理解 :) - Frits

是的，我的错。如果我没错的话，这是一个解决方案。:) 已编辑原帖。 - Lorenz0

这是一个有效的禁用链接的方法，但你应该在代码中添加条件。 - Chris

我认为你的答案中的onClick方法需要一个参数'e'，像这样：(e) => e.preventDefault() - eyeballs

onClick={ (event) => event.preventDefault() } 对我有效。 - Armen Asaduryan

Answer 2

你的代码看起来已经很干净、简略了。不确定为什么你想要一个“更容易”的方法。我会完全按照你现在的方式去做。

但是，这里有一些可供选择的替代方案：

---

使用 pointer-events

这个可能是你能得到的最简短的方法:

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

---

使用 onClick 监听器

作为一种替代方案，您可以使用通用的 <a> 标签，并为条件添加 onClick 监听器。如果您有很多链接需要控制它们的状态，那么这可能更适合，因为您可以在所有链接上使用同一个函数。

---

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

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

假设您正在使用 context.router，则上述内容将起作用。如果没有，请在您的类中添加：

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

---

更好的 OP 代码版本

如我之前所提到的，我仍认为您的方法是“最佳”的。您可以使用 span 替换锚点标签，以消除禁用链接的样式（例如指针光标、悬停效果等）。

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

- Chris

Answer 3

一个好的解决方案是使用带有事件对象的onClick()。只需在你的jsx中执行以下操作：

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

而在你的_onClick函数中：

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

React中的完整示例：

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

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

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

- Milad Jafari

Answer 4

只需将URL设置为空即可解决问题：

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

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

- chrismacp

Answer 5

简单来说，在React中禁用链接的更简单的方法是什么？

<Link to="#">Text</Link>

- Code Lover

Answer 6

在你的链接标签中使用这个。我在函数组件中使用它，它运行良好。

<Link style={{pointerEvents: 'none'}}>

- Awais Tahir

Answer 7

我认为你应该将 to=null 属性用于禁用链接。

<Link to=null />

你的代码：

render() {
    return (<li>
        <Link to={this.props.canClick?'/goto-a-link':null} >Test</Link>
    </li>)  
}

- Nguyên Cát Phạm

---

这并不会阻止文本看起来像一个链接。 - James Gentes

这并没有禁用我的应用程序中的链接。你有参考链接或文档吗？ - SherylHohman

设置<Link={null}>会带回以下错误：警告：在“Link”中，“to”属性被标记为必需，但其值为“null”。 - blueprintchris

Answer 8

在链接的“to”属性中传递“＃”应该对您有所帮助。您可以根据自己的需求定义链接。如果要禁用它，只需在“props.link”中传递“＃”。

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

- Mukesh Chandra

Answer 9

我不喜欢任何一个答案。令人惊讶的是，如果您正在使用Bootstrap，则分配禁用类将使链接无效。因此，无需更改路径为#或其他任何内容。

<Link to='something/else' className='nav-link disabled'>Transactions Detail</Link>

- Muhammad Mubashirullah Durrani

Answer 10

你可以有条件地设置 Link 组件的 to 属性。当你将其设置为 "#" 时，链接将被禁用。

render() {
    return (
      <li>
        {
          <Link to={`${this.props.canClick ? '/' : '#'}`}>Test</Link>
        }
      </li>
    )  
}

- Midhun Darvin