如何执行 function 作为 React 组件之间的道具传递？

Question

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

我的“Auth”组件将 state 和 function 中的信息发送到“AuthMenu”组件。

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

当我检查"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;
    }
`;

...

const AuthMenu = ({info, logout})=> {
    const token = localStorage.getItem('tk');
    if (token === null) {
        return (
          <Container>
            <IconImg src={info.img} alt="User" />
            <ContentWrap>
              <Btn>Login</Btn>
            </ContentWrap>
          </Container>
        )
    } else {
        return (
          <Container>
            <IconImg src={info.img} alt="User" />
            <ContentWrap>
              <Name>{info.name}</Name>
              <Btn onClick={logout}>Logout</Btn>
            </ContentWrap>
          </Container>
        );
    }
}

export default AuthMenu

Answer 1

您的handleDeleteAuth未绑定到组件。 请添加logout={this.handleDeleteAuth.bind(this}或将其更改为箭头 function：

    const handleDeleteAuth = () => {
        console.log("Logout Successful!");
        this.setState({
            info: {
                id: '',
                name: '',
                img: '/icons/user.png',
            }
        });
    }

Answer 2

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

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

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

我的问题解决了！

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

Bug 的场景是这样的。

1. 单击注销按钮。 （退出按钮包含在 Memu 组件中）
2. 菜单组件的执行事件。 （菜单组件是主体包含的模态。）
3. 停止事件传播。
4. 注销按钮无法使用。

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