![](/img/trans.png)
[英]ReactJS + React Router: How to disable link from React-Router's <Link>?
[英]How to disable a link in reactjs?
我在我的reactjs應用程序中有這個:
import Link from 'react-router/lib/Link'
一直試圖禁用此鏈接,但這沒有達到預期的效果:
<Link disable={true}/>
它只是讓它變得不可見。 如何禁用(基於條件)reactjs Link?
包含react-router上的許多問題, Link Component中沒有支持禁用屬性,因此您可以嘗試使用此問題 :
使用preventDefault()
來處理onClick事件。
/* YourComponent.js */
class YourComponent extends React.Component {
render() {
return (
<Link onClick={e => e.preventDefault()} />
);
}
}
pointer-events
屬性 /* YourComponent.js */
class YourComponent extends React.Component {
render() {
return (
<Link className='disabled-link' />
);
}
}
/* css file */
.disable-link {
pointer-events: none;
}
或者你可以使用內聯樣式
/* YourComponent.js */
class YourComponent extends React.Component {
render() {
return (
<Link style={{ pointerEvents: 'none' }} />
);
}
}
我使用的是方法2,在我的項目中對我來說更清楚。
您可以根據某些狀態有條件地呈現看起來像已禁用鏈接的內容。
例如在打字稿中:
export interface Location {
pathname: string;
search: string;
state: any;
hash: string;
key ?: string;
}
interface LinkProps {
to: string | Location
replace?:boolean
}
interface DisableLinkProps extends LinkProps {
enabled: boolean
linkText:string
}
export class DisableLink extends React.Component<DisableLinkProps, undefined> {
render() {
var element= this.props.enabled ? <span className="disableLinkDisabled">{this.props.linkText}</span> : <Link to={this.props.to} replace={this.props.replace}>{this.props.linkText}</Link>
return element;
}
}
interface DemoClassState {
linkEnabled:boolean
}
export class DemoClass extends React.Component<undefined, DemoClassState> {
constructor(props) {
super(props);
this.state = { linkEnabled:false }
}
toggleLinkEnabled = () => {
this.setState((prevState) => {
return {
linkEnabled: !prevState.linkEnabled
}
});
}
render() {
return <div>
<DisableLink enabled={this.state.linkEnabled} to="/somewhere" linkText="Some link" />
<button onClick={this.toggleLinkEnabled}>Toggle link enabled</button>
</div>
}
}
這實際上有點棘手。 甚至可能有點不明智。
https://css-tricks.com/how-to-disable-links/
我采取的路線(沒有雙關語)是不呈現鏈接。
我從react-router的Link
組成了一個新組件。
import React from 'react';
import { Link } from 'react-router-dom';
export default function ToggleableLink(props) {
const { disabled, ...rest } = props;
return disabled ? props.children : <Link {...rest}>{props.children}</Link>;
}
用法:
<ToggleableLink disabled={!showTheLink}>Foobar</ToggleableLink>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.