简体   繁体   English

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

[英]How do I execute a function passed as props between components in React?

I'm in troubble.我有麻烦了。 When I was creating the logout function using React , a problem occurred.当我使用React创建注销 function 时,出现了问题。

My "Auth" component send info in state and function to "AuthMenu" component.我的“Auth”组件将 state 和 function 中的信息发送到“AuthMenu”组件。

But, the logout function in this code, <Btn onClick={logout}>Logout</Btn> , is not working.但是,此代码<Btn onClick={logout}>Logout</Btn>中的注销 function 不起作用。

When I checked the props in "AuthMenu" , console.log(logout);当我检查"AuthMenu"中的道具时, console.log(logout); showed the function's code well.很好地展示了函数的代码。 But, not working..但是,不工作..

Am I writing the wrong code?我写错代码了吗?

. .

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

your handleDeleteAuth is not binded to the component.您的handleDeleteAuth未绑定到组件。 please add logout={this.handleDeleteAuth.bind(this} or change it to be arrow function:请添加logout={this.handleDeleteAuth.bind(this}或将其更改为箭头 function:


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

Is your onClick working properly, just ignoring the prop, sometimes clicks don't work on certain components, you can try this你的onClick是不是工作正常,只是忽略了道具,有时候点击在某些组件上不起作用,你可以试试这个

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

In my code, is just styled-component.在我的代码中,只是样式化组件。

Is this the cause of the unwanted action?这是不需要的操作的原因吗?

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

My Problem is solved!我的问题解决了!

The cause of error is event.stopImmediatePropagation();错误的原因是event.stopImmediatePropagation(); . .

Bug's Scenario is that. Bug 的场景是这样的。

  1. Click Logout Button.单击注销按钮。 (Logout Buttton is included by Memu component) (退出按钮包含在 Memu 组件中)
  2. Executed event of Menu compoennt.菜单组件的执行事件。 (Menu component is modal included by body.) (菜单组件是主体包含的模态。)
  3. stoped event propagation.停止事件传播。
  4. Logout button can not work.注销按钮无法使用。

I have had this error for over 6 hours.This is just my mistake!!!我有这个错误超过 6 小时。这只是我的错误!!!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM