Question

路由器链接mouseenter事件无法正常工作。当我将光标放在路由器链接上时，它不会更改路由。我的路由器链接工作正常，但我想处理mouseenter事件。请告诉我一些如何解决这个问题的方法

import React, { Component } from 'react';
    import { browserHistory } from "react-router";
    import createHistory from "history/createBrowserHistory";
    import ToggleDisplay from 'react-toggle-display';
     import './App.css';
    import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
    import Example from './Example.js';
    import About from "./About.js"; 
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    import PropTypes from "prop-types";

    class App extends Component {
      constructor(props) {
        super(props);
        this.onNavigateHome = this.onNavigateHome.bind(this);
      }

      onNavigateHome() {
        this.props.history.push('/about');
      }
      render() {
        return <div className="App">
            <Router >
              <div>
                <ul>
                  <li>
                    <Link to="/">Home</Link>
                  </li>
                  <li>
                    <Link to="/about" onMouseEnter={this.onNavigateHome.bind(this)}>
                      About
                    </Link>
                  </li>

                </ul>

                <hr />

                <Route exact path="/" component={Example} />
                <Route path="/about" component={About} />
              </div>
            </Router>
            <Example />
          </div>;
      }
    }

    export default App;

Answer 1

React Router的链接设计为点击事件而非鼠标输入事件。当您进行鼠标输入时，可以通过使用状态更改来执行此操作。以下是伪代码。

  changeState(){
    if (!this.state.entered) {
      // window.location.href='/newResource';
      this.props.history.push('/about');
    }
    this.setState({ entered : !this.state.entered });
  }

  render() {

    return (<Router>
      <span role="link" onMouseEnter={this.changeState}>
        Link
      </span>
    </Router>);
  }

路由器链接不适用于mouseenter事件

1 个答案: