Javascript 单击触发另一个组件的状态更改赢得'；行不通

我设置了一个点击函数，该函数应该触发位于不同文件中的单独组件中的状态更改。我的

splash.js

文件包含组件

splash

，该组件有一个徽标，单击该徽标时，它将从登录页（splash）更改为我的主页。这是

splash.js

：

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

export default class Splash extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imgSrc: Logo1 
            //this.toggleShowHome = this.toggleShowHome.bind(this);
        }
        this.handleMouseOver = this.handleMouseOver.bind(this);
        this.handleMouseOut = this.handleMouseOut.bind(this);
    }

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

     }

    handleMouseOver() {
        this.setState({
            imgSrc: Logo2 
        });
    }

    handleMouseOut() {
        this.setState({
            imgSrc: Logo1
        });
    }

    render() {
        return(
            <div id='Splashwrapper'>
            <img id='logoc' onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} src={this.state.imgSrc} onClick={this.props.onLogoCLicked}></img>
                <img id='backg' src={Woods}></img>
            </div>    
        );  
    }
}

---

但是，我的代码没有任何作用。如何链接

Splash

中的点击功能，以更改我的

App.js

文件中

Splash

的状态，使其显示我的主页？

您的

Splash

组件中似乎有输入错误。在

img

上，您可以执行

onClick={this.props.onLogoCLicked}

但是当您使用组件时，您将在props中传递的组件作为

onLogoCLicked

-注意clicked中的大写字母L

---

考虑在您的组件中使用

propTypes

，如果没有所需的道具，它会发出一些噪音。

控制台中有任何消息吗？没有，它只是不起任何作用..很确定这不重要，但可能。。。你在构造器和你传递的道具上都用“这个”绑定“logoClicked”，试着再做一次吧，这让我发疯了，我不敢相信我错过了那个打字错误lol。现在效果很好。

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
        }
        this.logoClicked = this.logoClicked.bind(this);

    }

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

    logoClicked(props) {
        this.setState({splash:false});
    }
    render() {
        if (this.state.splash) {
            return <Splash onLogoClicked={this.logoClicked.bind(this)} />
        }

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

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