有没有办法从函数中单击 Navlink? [英] Is there a way to click Navlink from within a function?

问题描述

基本上，我延迟了导航.

单击链接后，onClick 处理程序通过检查条件并调用另一个函数来阻止导航.如果满足特定条件，则只有页面导航到另一个.

那么如何从该函数中触发 Navlink 点击.

解决方案

我能够通过使用 event.preventDefault() 解决这个问题.

import React, { Component } from 'react'从'react-router-dom' 导入 { NavLink }从'./Modal'导入模态var 确认 = {};类示例扩展组件{句柄点击(事件){if(this.props.data.length!=0) {确认 = {迅速的: (<div className="row"><div className="col s12 m5"><a className="btn" onClick={this.props.actions.toggleModal()}>否</a></div><div className="col s12 m7"><NavLink to={"/"+this.props.endpoint+"/1"} activeClassName="active" className="btn"}>是的，导航到选项1</NavLink></div>

)}event.preventDefault();}}使成为() {返回 (<div><导航><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)}>选项 1</NavLink></li><li className="col s4 m4 l3"><NavLink to={"/"+this.props.endpoint+"/2"} activeClassName="active">选项2</NavLink></li><li className="col s4 m4 l3"><NavLink to={"/"+this.props.endpoint+"/3"} activeClassName="active">选项3</NavLink></li>

</nav>{this.props.openModal ?<模态数据={确认}/>: 空值}

)}}导出默认示例

Basically, I'm delaying the navigation.

After clicking the Link, the onClick handler prevents the navigation by checking a condition and calls another function. If certain condition is met, then only the page navigates to another.

So how can I trigger Navlink click from within that function.

解决方案

I was able to solve this problem by using 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

这篇关于有没有办法从函数中单击 Navlink?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！