如何在 React 的组件之间执行作为 props 传递的函数？

Question

我有麻烦了。当我使用React创建注销功能时，出现了问题。我的“Auth”组件将状态和功能信息发送到“AuthMenu”组件。但是，此代码中的注销功能<Btn onClick={logout}>Logout</Btn>不起作用。当我检查"AuthMenu"中的道具时，console.log(logout);很好地显示了函数的代码。但是，不工作..我写错代码了吗？.Auth.jsimport React, { Component } from 'react'import { GetUser } from '../../controllers/auth'class Auth extends Component {    state = {        info: {            id: '',            name: '',            img: '/icons/user.png',        },    }    handleSetAuth(data) {        this.setState({            info: {                id: data.user_id,                name: data.user_nickname,                img: '/icons/user.png',             }        });    }    handleDeleteAuth() {        console.log("Logout Successful!");        this.setState({            info: {                id: '',                name: '',                img: '/icons/user.png',            }        });    }    componentDidMount() {        if (localStorage.getItem('tk') !== null){            GetUser((data)=> {                if (this.state.info !== data)                this.handleSetAuth(data);            });        }    }    render() {        return (          <AuthMenu info={this.state.info} logout={this.handleDeleteAuth}></AuthMenu>        );    }}export default AuthAuthMenu.jsimport React from 'react'import styled from 'styled-components'...const Btn = styled.button`    position: relative;    display: inline-block;    float: right;    width: 100px;    height: 30px;    font-size: 0.8rem;    line-height: 30px;    margin: 15px 0 15px auto;    border-radius: 4px;    border: 1px solid #eee;    text-align: center;    cursor: pointer;    transition: .2s ${transition};    ${noselect}    &:hover,    &:active {        background-color: ${palette.gray8};        color: white;    }    ${media.small} {        width: 80px;    }`;

Answer 1

你的onClick是否正常工作，只是忽略了道具，有时点击在某些组件上不起作用，你可以试试这个

              <Btn onClick={() => {console.log("clicked");
              logout()}}>Logout</Btn>

Answer 2

我的问题解决了！

错误的原因是event.stopImmediatePropagation();。

Bug 的场景是这样的。

1. 单击注销按钮。（退出按钮包含在 Memu 组件中）

2. 菜单组件的执行事件。（菜单组件是主体包含的模态。）

3. 停止事件传播。

4. 注销按钮无法使用。

我有这个错误超过 6 小时。这只是我的错误！！！

Answer 3

在我的代码中，只是样式化组件。

这是不需要的操作的原因吗？

import styled from 'styled-components'

const Btn = styled.button`

    position: relative;

    display: inline-block;

    float: right;

    width: 100px;

    height: 30px;

    font-size: 0.8rem;

    line-height: 30px;

    margin: 15px 0 15px auto;

    border-radius: 4px;

    border: 1px solid #eee;

    text-align: center;

    cursor: pointer;

    transition: .2s ${transition};

    ${noselect}

    &:hover,

    &:active {

        background-color: ${palette.gray8};

        color: white;

    }

    ${media.small} {

        width: 80px;

    }

`;

Answer 4

你handleDeleteAuth的没有绑定到组件。请添加logout={this.handleDeleteAuth.bind(this}或更改为箭头功能：

    const handleDeleteAuth = () => {

        console.log("Logout Successful!");

        this.setState({

            info: {

                id: '',

                name: '',

                img: '/icons/user.png',

            }

        });

    }