Javascript 在 React 中禁用链接的更简单方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38321601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easier way to to disable link in React?
提问by roger
I want to disable Linkin some condition:
我想Link在某些情况下禁用：
render() {
return (<li>{this.props.canClick ?
<Link to="/">Test</Link> :
<a>Test</a>}
</li>)
}
<Link>must specify to, so I can not disable <Link>and I have to use <a>
<Link>必须指定to，所以我不能禁用<Link>，我必须使用<a>
回答by Lorenz0
You could just set set the link's onClick property:
您可以设置链接的 onClick 属性：
render () {
return(
<li>
{
this.props.notClickable
? <Link to="/" className="disabledCursor" onClick={ (event) => event.preventDefault() }>Link</Link>
: <Link to="/" className="notDisabled">Link</Link>
}
</li>
);
};
Then disable the hover effect via css using the cursor property.
然后使用 cursor 属性通过 css 禁用悬停效果。
.disabledCursor {
cursor: default;
}
I think that should do the trick?
我认为这应该可以解决问题？
回答by Milad Jafari
Best solution is using onClick()with eventobject. just do this in your jsx:
最好的解决方案是使用onClick()与event对象。只需在您的 jsx 中执行此操作：
<Link to='Everything' onClick={(e) => this._on(e)}
and in your _onClickfunction:
并在您的_onClick功能中：
_onParent = (e) => {
e.preventDefault()
}
Complete Example in React:
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>
)
}
}
回答by Chris
Your code already seems quite clean and slim. Not sure why you want an "easier" way. I'd do it exactly how you're doing it.
您的代码已经看起来非常干净和精简。不知道为什么你想要一个“更简单”的方式。我会完全按照你的方式去做。
However, here are a few alternatives:
但是，这里有一些替代方案：
Using pointer-events
使用指针事件
This one is probably as short and sweet as you can get it:
这个可能和你能得到的一样简短和甜蜜：
render() {
return (<li>
<Link to="/" style={this.props.canClick ? {pointerEvents: "none"} : null}>Test</Link>
</li>)
}
Using onClick listener
使用 onClick 侦听器
As an alternative, you could use a generic <a>tag and add an onClicklistener for the condition. This is probably better suited if you have lots of links that you want to control their state because you could use the same function on all of them.
作为替代方案，您可以使用通用<a>标记并onClick为条件添加侦听器。如果您有很多要控制其状态的链接，这可能更适合，因为您可以对所有链接使用相同的功能。
_handleClick = () => {
if(this.props.canClick) {
this.context.router.push("/");
}
}
render() {
return (
<li>
<a onClick={this._handleClick}>Test</a>});
</li>
);
}
The above will work assuming you are using context.router. If not, add to your class:
假设您使用的是context.router. 如果没有，请添加到您的课程中：
static contextTypes = {
router: React.PropTypes.object
}
Better version of OP code
更好的 OP 代码版本
As I mentioned above, I still think your approach is the "best". You could replace the anchor tag with a span, to get rid of the styling for a disabled link (e.g pointer cursor, hover effects, etc).
正如我上面提到的，我仍然认为你的方法是“最好的”。您可以用跨度替换锚标记，以摆脱禁用链接的样式（例如指针光标、悬停效果等）。
render() {
return (<li>{this.props.canClick ?
<Link to="/">Test</Link> :
<span>Test</span>}
</li>)
}
回答by Code Lover
In short easier way to disable link in React?
简而言之，在 React 中禁用链接的更简单方法？
<Link to="#">Text</Link>
回答by Mukesh Chandra
Passing #in toprop to the Link should do the trick for you
通过#在to道具链接应该做的伎俩为你
You can define link as per your requirement. if you want to disable it just pass #in props.link
您可以根据需要定义链接。如果你想禁用它只是传递#中props.link
render() {
return (<li><Link to={props.link}>Test</Link></li>);
}
回答by Nguyên Cát Ph?m
I think you should you atrribute to=nullto set disable a link.
我认为您应该将 atrtribute to=null设置为禁用链接。
<Link to=null />
Your code:
您的代码：
render() {
return (<li>
<Link to={this.props.canClick?'/goto-a-link':null} >Test</Link>
</li>)
}
回答by chrismacp
Just making the URL null seems to do the trick:
只是让 URL 为空似乎可以解决问题：
const url = isDisabled ? null : 'http://www.stackoverflow.com';
return (
<a href={url}>Click Me</a>
);
