[英]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 的场景是这样的。
I have had this error for over 6 hours.This is just my mistake!!!我有这个错误超过 6 小时。这只是我的错误!!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.