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

Question

我有麻烦了。当我使用React创建注销功能时，出现了问题。

我的“Auth”组件将状态和功能信息发送到“AuthMenu”组件。

但是，此代码中的注销功能<Btn onClick={logout}>Logout</Btn>不起作用。

当我检查"AuthMenu"中的道具时，console.log(logout);很好地显示了函数的代码。但是，不工作..

我写错代码了吗？

.

Auth.js

import 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 Auth

AuthMenu.js

import 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是否正常工作，只是忽略了道具，有时点击在某些组件上不起作用，你可以试试这个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Btn&nbsp;onClick={()&nbsp;=>&nbsp;{console.log("clicked"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logout()}}>Logout</Btn>

Answer 2

我的问题解决了！错误的原因是event.stopImmediatePropagation();。Bug 的场景是这样的。单击注销按钮。（退出按钮包含在 Memu 组件中）菜单组件的执行事件。（菜单组件是主体包含的模态。）停止事件传播。注销按钮无法使用。我有这个错误超过 6 小时。这只是我的错误！！！

Answer 3

在我的代码中，只是样式化组件。这是不需要的操作的原因吗？import styled from 'styled-components'const Btn = styled.button`&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; float: right;&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; height: 30px;&nbsp; &nbsp; font-size: 0.8rem;&nbsp; &nbsp; line-height: 30px;&nbsp; &nbsp; margin: 15px 0 15px auto;&nbsp; &nbsp; border-radius: 4px;&nbsp; &nbsp; border: 1px solid #eee;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; transition: .2s ${transition};&nbsp; &nbsp; ${noselect}&nbsp; &nbsp; &:hover,&nbsp; &nbsp; &:active {&nbsp; &nbsp; &nbsp; &nbsp; background-color: ${palette.gray8};&nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; }&nbsp; &nbsp; ${media.small} {&nbsp; &nbsp; &nbsp; &nbsp; width: 80px;&nbsp; &nbsp; }`;

Answer 4

你handleDeleteAuth的没有绑定到组件。请添加logout={this.handleDeleteAuth.bind(this}或更改为箭头功能：&nbsp; &nbsp; const handleDeleteAuth = () => {&nbsp; &nbsp; &nbsp; &nbsp; console.log("Logout Successful!");&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; info: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img: '/icons/user.png',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }