在同一组件 React 中捕获 Link 单击

Question

我有一个 NavBar，上面有一个徽标，其中包含 Link Home 页面 "/"。该应用程序从主页开始，然后其 UI 将根据用户的选择开始更改。如果用户仍在 Home 组件中并单击 Logo.

，我想给用户一个重置所有内容的机会

App.js

...
import Home from './views/Home';
import Navbar from './components/navbar/Navbar';
...

render() {
  return (
    <div>
        <Navbar />
        <main ref={(element) => { this.mainElement = element; }}>
            <Switch>
                <PrivateRoute exact path="/" component={Home} />
         ...
    </div>
  )
}

在 NavBar 里面，我有一个带有 Link 的徽标：

NavBar.js

  <div className="col-sm-3 col-xs-6">
    <Link to="/" className="navbar-item">
      <img className="navbar-logo" src={logo} alt="" />
    </Link>
  </div>

Home.js

class Home extends React.Component {
    //Link was clicked
}

如果我已经在组件中Home。我如何知道Logo's Link被点击并刷新页面状态为默认值？

Answer 1

有一种传达此信息的简单方法。我建议这样做：

1.The App 组件具有应用程序的状态，存储其两个子组件所需的所有信息。在 state 中添加一个值 clicked，如果图像被点击则为真；否则为假。

在 App 组件中添加一个事件处理程序。将它传递给导航栏，以便您可以用于图像标记。
通过props将state传递给home；当它改变时，重新渲染开始并且主页知道。

应用程序

class App extends Component {
  state = {
     clicked: false,
  }

 handler = () => { this.setState({clicked: true})}

 componentDidMount() {
  this.timerID = setInterval(
    () => this.setState({clicked: false}),
    2000
  );
 }

  componentWillUnmount() {
    clearInterval(this.timerID);
  } 

 render() {
   return (
     <div>
      <Navbar clicked={this.handler} />
      <Home click={this.state.clicked} />
    </div>
   );
  } 
}

export default App;

导航栏

class Navbar extends Component {
    render() {
      return(
         <button onClick={this.props.clicked} >Click Me!</button>
      );
     }
}

export default Navbar;

首页

class Home extends Component {
    render() {
        console.log('rendering...')
      return(
         <p>The logo was clicked: {this.props.click ? "yes" : "no"} </p>
      );
 }
}

export default Home;

当点击Button时，状态由false变为true，由true变为true。第一次点击后，react 实际上重新渲染了 home 元素，但看起来是一样的。为了表明某些事情发生了，我使用两个生命周期方法将值从 true 重置为 false。如果没有计时器，如果主页上有日志，开发人员可以看到渲染发生在每个按钮（或图像点击）上。

此链接现在可以为您提供帮助，当您获得更多经验时： https://www.pluralsight.com/guides/react-communicating-between-components

在同一组件 React 中捕获 Link 单击

Catching the Link click when in the same component React

javascript

hyperlink

reactjs

react-router