Question

我设置了一个on click函数，该函数应该触发位于不同文件中的单独组件中的状态更改。我的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的状态：

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

但是，我的代码没有做任何事情。如何在Splash中链接点击功能以更改splash文件中App.js的状态，以便显示我的主页？

Answer 1

您的Splash组件中似乎有拼写错误。在您img onClick={this.props.onLogoCLicked} onLogoClicked但是当您使用组件时，您将道具传递为propTypes - 请注意点击的大写字母L。

考虑在你的组件中使用ActivityManager am2 = (ActivityManager) getSystemService(Activity.ACTIVITY_SERVICE); listelement = am2.getRunningAppProcesses().get(0).processName;，如果没有必要的道具，React会对它产生一些噪音。

单击触发器更改另一个组件上的状态将不起作用

1 个答案: