[英]Easier way to to disable link in React?
我想在某些情况下禁用Link
:
render() {
return (<li>{this.props.canClick ?
<Link to="/">Test</Link> :
<a>Test</a>}
</li>)
}
<Link>
必须指定to
,所以我不能禁用<Link>
而我必须使用<a>
您可以设置链接的 onClick 属性:
render () {
return(
<li>
{
this.props.notClickable
? <Link to="/" className="disabledCursor" onClick={ (event) => event.preventDefault() }>Link</Link>
: <Link to="/" className="notDisabled">Link</Link>
}
</li>
);
};
然后使用 cursor 属性通过 css 禁用悬停效果。
.disabledCursor {
cursor: default;
}
我认为这应该可以解决问题吗?
你的代码看起来已经很干净和苗条了。 不知道为什么你想要一个“更简单”的方式。 我会完全按照你的做法去做。
但是,这里有一些替代方案:
这可能是你能得到的最简短和甜蜜的:
render() {
return (<li>
<Link to="/" style={this.props.canClick ? {pointerEvents: "none"} : null}>Test</Link>
</li>)
}
作为替代方案,您可以使用通用<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
}
正如我上面提到的,我仍然认为你的方法是“最好的”。 您可以用跨度替换锚标记,以摆脱禁用链接的样式(例如指针光标、悬停效果等)。
render() {
return (<li>{this.props.canClick ?
<Link to="/">Test</Link> :
<span>Test</span>}
</li>)
}
一个好的解决方案是将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>
)
}
}
只是使 URL 为 null 似乎可以解决问题:
const url = isDisabled ? null : 'http://www.stackoverflow.com';
return (
<a href={url}>Click Me</a>
);
简而言之,在 React 中禁用链接的更简单方法?
<Link to="#">Text</Link>
我认为您应该将属性设置为 to=null来设置禁用链接。
<Link to=null />
你的代码:
render() {
return (<li>
<Link to={this.props.canClick?'/goto-a-link':null} >Test</Link>
</li>)
}
将#
传递to
链接应该可以为您解决问题
您可以根据需要定义链接。 如果你想禁用它,只需在props.link
中传递#
render() {
return (<li><Link to={props.link}>Test</Link></li>);
}
我不喜欢任何答案。 令人惊讶的是,如果您使用引导程序,分配禁用类将使链接无效。 因此,无需将路径更改为 # 或其他任何内容。
<Link to='something/else' className='nav-link disabled'>Transactions Detail</Link>
在您的链接标签中使用它。 我在功能组件中使用它,它工作正常。
<Link style={{pointerEvents: 'none'}}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.