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

我希望on click函数在我的splash文件中将App.js的值更改为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 >
}

然后在你的Splash组件中：

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

Answer 2

您应该在app.is中定义函数toggleShowHome并将其作为prop传递给您的splash组件。然后你可以在app.js中改变你的本地状态

Answer 3

不确定我是否理解你，但你可以尝试这个：将点击功能从父（关于）传递给子（Splash），如下所示：

您的主要应用

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组件：

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

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

3 个答案: