从父组件到子组件的到达点击处理程序不起作用

Question

我是 React 领域的新手，所以我不确定自己做错了什么。我在父组件中有一个点击处理程序，需要传递子组件的按钮元素。

父组件是'LogStatus'

import React, { Component } from 'react';
import DisplayMessage from './DisplayMessage'
class LogStatus extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogin: true,
        }
        this.btnChangeStatusClickHandler = this.btnChangeStatusClickHandler.bind(this);
    }

    btnChangeStatusClickHandler() {
        this.setState(previousState =>
            previousState.isLogin = !this.state.isLogin,
        )
    }

    render() {
        let statusMessage = '';
        if (this.state.isLogin === true) {
            statusMessage = 'Login';
        }
        else {
            statusMessage = 'Logoff'
        }
        return (
            <div>
                <DisplayMessage statusMessage={statusMessage} loginStatusHandler={this.btnChangeStatusClickHandler} />
            </div>
        );
    }
}

export default LogStatus;

子组件是'DisplayMessage'

import React, { Component } from 'react';
class DisplayMessage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            statusMessage: props.statusMessage,
            btnStatusClickHandler: props.loginStatusHandler,
        }
    }
    render() {
        let displayBtnMessage = '';
        if (this.state.statusMessage === 'Login') {
            displayBtnMessage = "Logoff";
        }
        else {
            displayBtnMessage = 'Login';
        }
        return (
            <div>
                <h3>Login Status: {this.state.statusMessage}</h3>
                <button onClick={this.state.btnStatusClickHandler}>{displayBtnMessage}</button>
            </div>
        );
    }
}

export default DisplayMessage;

工作代码供参考：

父组件是'LogStatus'

import React, { Component } from 'react';
import DisplayMessage from './DisplayMessage'
class LogStatus extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogin: true,
            displayStatus: '',
        }
        this.btnChangeStatusClickHandler =     this.btnChangeStatusClickHandler.bind(this);
    }

    btnChangeStatusClickHandler() {
        this.setState(previousState => {
            if (this.state.isLogin === true) {
                return {
                    displayStatus: 'Login',
                    isLogin: !previousState.isLogin,
                }
            }
            else {
                return {
                    displayStatus: 'Logoff',
                    isLogin: !previousState.isLogin,
                }
            }
        })
    }

    render() {
        return (
            <div>
                <DisplayMessage statusMessage={this.state.displayStatus} loginStatusHandler={this.btnChangeStatusClickHandler} />
            </div>
        );
    }
}

export default LogStatus;

子组件是'DisplayMessage'

import React, { Component } from 'react';
class DisplayMessage extends Component {
    render() {
        const { statusMessage, loginStatusHandler } = this.props;
        let displayBtnMessage = '';
        if (statusMessage === 'Login') {
            displayBtnMessage = "Logoff";
        }
        else {
            displayBtnMessage = 'Login';
        }
        return (
            <div>
                <h3>Login Status: {statusMessage}</h3>
                <button onClick={loginStatusHandler}>{displayBtnMessage}</button>
            </div>
        );
    }
}

export default DisplayMessage;

Answer 1

您需要对代码进行两次更改；

1。确保您的点击处理程序的上下文是正确的

你btnChangeStatusClickHandler当前是你的类组件的一个方法。但是，调用此函数将使用全局上下文 (this)。所以this.setState 将不起作用。您可以通过将方法转换为箭头函数成员来解决此问题：

改变：

    btnChangeStatusClickHandler() {
        this.setState(previousState =>
            previousState.isLogin = !this.state.isLogin,
        )
    }

收件人：

    btnChangeStatusClickHandler = () => {
        this.setState(previousState =>
            previousState.isLogin = !this.state.isLogin,
        )
    }

2。不要在状态中委派您的点击处理程序

不需要（也不推荐）在组件状态下委派您的点击处理程序和其他道具。您应该始终直接使用来自props 的事件处理程序和其他属性，以便它可以处理更改。

import React, { Component } from 'react';

class DisplayMessage extends Component {
    render() {
        const { statusMessage, loginStatusHandler } = this.props;
        let displayBtnMessage = '';

        if (statusMessage === 'Login') {
            displayBtnMessage = "Logoff";
        }
        else {
            displayBtnMessage = 'Login';
        }

        return (
            <div>
                <h3>Login Status: {statusMessage}</h3>
                <button onClick={loginStatusHandler}>{displayBtnMessage}</button>
            </div>
        );
    }
}

export default DisplayMessage;