基本上,我正在延迟导航。
单击链接后,onClick 处理程序通过检查条件并调用另一个函数来阻止导航。如果满足特定条件,则仅该页面导航到另一个页面。
那么我如何从该函数中触发 Navlink 单击。
我能够通过使用解决这个问题event.preventDefault().
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import Modal from './Modal'
var confirmation = {};
class Example extends Component {
handleClick(event) {
if(this.props.data.length!=0) {
confirmation = {
prompt: (
<div className="row">
<div className="col s12 m5"><a className="btn" onClick={this.props.actions.toggleModal()}>No</a></div>
<div className="col s12 m7"><NavLink to={"/"+this.props.endpoint+"/1"} activeClassName="active" className="btn"}>Yes, Navigate to Option 1</NavLink></div>
</div>
)
}
event.preventDefault();
}
}
render() {
return (
<div>
<nav>
<div className="row">
<div className="col s10">
<ul className="col s12">
<li className="col s4 m4 l3"><NavLink to={"/"+this.props.endpoint+"/1"} activeClassName="active" onClick={this.handleClick.bind(this)}>Option 1</NavLink></li>
<li className="col s4 m4 l3"><NavLink to={"/"+this.props.endpoint+"/2"} activeClassName="active">Option 2</NavLink></li>
<li className="col s4 m4 l3"><NavLink to={"/"+this.props.endpoint+"/3"} activeClassName="active">Option 3</NavLink></li>
</ul>
</div>
</div>
</nav>
{
this.props.openModal ?
<Modal data={confirmation}/>
: null
}
</div>
)
}
}
export default example
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)