如何将点击功能链接到React应用中的另一个组件？

Question

我有一个包含徽标的登录页面。我试图让这个标志触发状态值的变化。这样做的目的是在点击时将着陆页更改为主页。我已经设置好了，以便在确定的时间内清除目标网页，但我希望在点击时完成此操作。这是我splash.js文件，其中包含上点击功能以及标志和着陆页：

import React, { Component } from 'react'; 
import Woods from './woods.jpeg'; 
import Logo1 from './whitestar.png'; 


export default class Splash extends Component { 
    constructor() { 
     super(); 
      this.toggleShowHome = this.toggleShowHome.bind(this); 
    } 

    toggleShowHome(property){ 
     this.setState((prevState)=>({[property]:!prevState[property]})) 
    } 

    render() { 
     return(
      <div id='Splashwrapper'> 
       <img src={Woods}></img> 
       <img id='logoc' src={Logo1} onClick={()=>this.toggleShowHome('showSquareOne')}></img> 
      </div>  
     ); 
    } 
} 

我想上点击功能改变我App.js文件的splash为false值：

import React, { Component } from 'react'; 
import Splash from './splash'; 

import Menu from 'components/Global/Menu'; 

export default class About extends Component { 
    constructor(){ 
     super(); 
     this.state = { 
      splash: true 
     } 

    } 

    componentDidMount() { 
     setTimeout (() => { 
     this.setState({splash: false}); 
     }, 10000); 
    } 

    render() { 
     if (this.state.splash) { 
      return <Splash /> 
     } 

     const { children } = this.props; // eslint-disable-line 

     return (
      <div className='About'> 
       <Menu /> 
       { children } 
      </div> 
     ); 
    } 
} 

如何将点击功能链接到App.js文件并更改splash的值？

Answer 1

为了确保我的理解，您正在寻找Splash组件上的图像来触发About组件的更改？

您可以将一个方法传递给Splash组件（从About），它可以在按下图像时调用它。因此，像这样：

render() { 
    if(this.state.splash) { 
     return <Splash onLogoClicked={this.logoClicked.bind(this)} /> 
    } 
    (.......) 
} 
logoClicked(foo) { 
    < change state here > 
} 

，然后在飞溅组件：

<img id='logoc' src={Logo1} onClick={this.props.onLogoClicked}></img> 

Answer 2

你应该app.is定义功能toggleShowHome，并把它作为一个道具你溅组件。然后你可以在app.js中改变你的本地状态

Answer 3

不知道我是否理解你，但你可以试试这个：将父按钮（About）传递给child（Splash），如下所示：

你的主要APP：

export default class About extends Component { 
    constructor(){ 
     super(); 
     this.state = { 
      splash: true 
     } 
     this.changeSplashState = this.changeSplashState.bind(this); 
    } 

    //componentDidMount() { 
     //setTimeout (() => { 
     //this.setState({splash: false}); 
     //}, 10000); 
    //} 

    changeSplashState() { 
     this.setState({splash: false}); 
    } 

    render() { 
     if (this.state.splash) { 
      return <Splash triggerClickOnParent={this.changeSplashState} /> 
     } 

     const { children } = this.props; // eslint-disable-line 

     return (
      <div className='About'> 
       <Menu /> 
       { children } 
      </div> 
     ); 
    } 
} 

您SPLASH COMPONENT：

export default class Splash extends Component { 
    constructor() { 
     super(); 
     //this.toggleShowHome = this.toggleShowHome.bind(this); 
    } 

    toggleShowHome(property){ 
     this.setState((prevState)=>({[property]:!prevState[property]})); 
     //IT'S UP TO YOU TO DECIDE SETTING TIMOUT OR NOT HERE 
     //setTimeout (() => { 
      this.props.triggerClickOnParent(); 
     //}, 10000); 
    } 

    render() { 
     return(
      <div id='Splashwrapper'> 
       <img src={Woods}></img> 
       <img id='logoc' src={Logo1} onClick={this.toggleShowHome.bind(this,'showSquareOne')}></img> 
      </div>  
     ); 
    } 
} 

随意在这里发布一些错误或者向我解释更多关于你需要的东西，但这就是它应该看起来像的方式，这是一种从父母到孩子传递功能作为道具的标准方式。

您还可以了解更多有关如何从父传道具子/孙/众更深层次的孩子（当然是在反应的方式）：

Force React container to refresh data

Re-initializing class on redirect