Catching the Link click when in the same component React

问题

I have a NavBar that has a Logo on it, that contains a Link to the Home page "/". The application starts from the main page and then its UI will start changing based on user's choices. I want to give the user a chance to reset everything if he is still in the Home component and clicks the 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>
  )
}

Inside NavBar I have a logo that has a Link attached to it:

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
}

If I am already in the component Home. How can I know that the Logo's Link was clicked and refresh the state of the page to default?

回答1:

There is a simple way to communicate this information. Here what I suggest to do:

1.The App component has the state of the application, storing all information needed to both its child Components. Add inside the state a value clicked, that is true if the image was clicked; false otherwise.

Add an event handler inside App component. Pass it to the navbar, so you can use for the image tag.
Pass the state to home via props; when it changes, re-render starts and home knows.

App

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;

Navbar

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

export default Navbar;

Home

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

export default Home;

When the click on Button, the state change from false to true and from true to true. After the first click, react actually re-render the home elements, but it looks the same. To show that something happens I use two lifecycle method to reset the value from true to false. Without timer, if there's a log on home, developers can look that rendering happens at each button (or image clicks).

This links can help you now and when you'll have a bit more experience: https://www.pluralsight.com/guides/react-communicating-between-components

来源：https://stackoverflow.com/questions/61935187/catching-the-link-click-when-in-the-same-component-react

标签

javascript

reactjs

hyperlink

react-router