Question

我有一个NavBar，上面有一个徽标，其中包含Link页Home的{{1}}。该应用程序从主页开始，然后其UI将根据用户的选择开始更改。如果用户仍在"/"组件中并单击Home，我想给用户一个重置所有内容的机会。

App.js

Logo

在... 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.js

NavBar

Home.js

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

如果我已经在组件class Home extends React.Component { //Link was clicked }中。我怎么知道单击Home并将页面状态刷新为默认状态？

Answer 1

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

1。App组件具有应用程序的状态，存储两个子组件都需要的所有信息。在状态内添加一个单击的值，如果单击该图像，则为true；否则，为0。否则为假。

在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;

导航栏

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;

单击“按钮”时，状态从false变为true，从true变为true。第一次单击后，react实际上重新渲染了home元素，但是看起来一样。为了说明发生了什么，我使用两种生命周期方法将值从true重置为false。没有计时器，如果在家中可以登录，则开发人员可以看到渲染发生在每个按钮（或图像单击）上。

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

在相同组件中反应时捕捉链接点击

1 个答案: