クリック機能をReactアプリの別のコンポーネントにリンクするにはどうすればいいですか？

Question

ロゴを含むリンク先ページがあります。私はこのロゴを国の価値の変化を引き起こすようにしようとしています。これは、クリック時にランディングページからホームページに変更することを目的としています。私は決まった時間に着陸ページをクリアするように設定しましたが、私はこれをクリックして行います。

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ファイルでfalseに splashの値を変更するにはクリック機能に必要

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>  
     ); 
    } 
} 

：これは私のsplash.jsクリック機能に含まれているファイルだけでなく、ロゴや着陸のページです

クリック時の機能をApp.jsファイルにリンクして、splashの値を変更するにはどうすればよいですか？

Answer 1

私が理解していることを確認するには、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を定義し、あなたのスプラッシュコンポーネントに小道具としてそれを渡す必要があります。

Answer 3

あなたのことをよく理解しているか分かりませんが、これを試すことができます：親（約）から子供（スプラッシュ）へのクリック機能を次のように渡す：

YOUR MAIN 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> 
     ); 
    } 
} 

YOUR SPLASHコンポーネント：

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