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

Posted 2023-03-05

【中文标题】在 React 中禁用链接的更简单方法？

【英文标题】：Easier way to to disable link in React?

【发布时间】：2016-11-14 06:22:53

【问题描述】：

我想在某些情况下禁用Link：

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

<Link>必须指定to，所以我不能禁用<Link>，我必须使用<a>

【参考方案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;

我认为这应该可以解决问题？

【讨论】：

也许可以编辑您的答案并举例说明如何在可能的情况下禁用 CSS 中的悬停效果？这将使未来可能不知道如何操作的新用户更容易:)

是的，我的错。如果我是对的，这是一个解决方案。 :) 编辑了原帖。

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

我认为你答案上的onClick方法需要有一个参数'e'，比如，(e) => e.preventDefault()

onClick= (event) => event.preventDefault() 对我有用

【参考方案2】：

您的代码已经看起来相当干净和苗条。不知道为什么你想要一个“更简单”的方式。我会按照你的方式做。

但是，这里有一些替代方案：

---

使用指针事件

这可能是你能得到的最简短和甜蜜的：

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代码的更好版本

正如我上面提到的，我仍然认为你的方法是“最好的”。您可以将锚标记替换为跨度，以摆脱禁用链接的样式（例如指针光标、悬停效果等）。

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

【参考方案3】：

一个好的解决方案是使用onClick() 和event 对象。只需在您的 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>
        )
    

【参考方案4】：

将 URL 设为 null 似乎可以解决问题：

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

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

【参考方案5】：

简而言之，在 React 中禁用链接更简单？

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

【参考方案6】：

我认为您应该将 to=null 属性设置为禁用链接。

<Link to=null />

您的代码：

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

【讨论】：

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

这并没有禁用我应用中的链接。您有参考链接或文档吗？

设置<Link=null> 会返回以下错误：Warning: Failed prop type: The prop 'to' is marked as required in 'Link', but its value is 'null'.

【参考方案7】：

将# 中的to 属性传递给链接应该可以解决问题

您可以根据需要定义链接。如果你想禁用它，只需在 props.link 中传递 #

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