Question

基本上，我推迟了导航。

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

那么如何从该功能中触发Navlink click。

Answer 1

您可以使用其API以编程方式导航到另一个页面（如果满足特定条件），而不是使用react-router链接组件。

export default class MyComponent extends Component {
  navCheck(nextPage) {
    if (someCondition) {
      this.context.router.history.push(nextPage);
    }
  }

  render() {
    return(<a onClick={() => this.navCheck('/next-page')}>Navigate To Another Page</a>);
  }
}

MyComponent.contextTypes = {
  router: PropTypes.shape({
    history: PropTypes.object.isRequired,
  }),
};

有关官方文档的更多信息：https://reacttraining.com/react-router/web/api/history

Answer 2

我能够通过使用 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？

2 个答案: