React onClick函数遇到问题。我通过使用mapDispatchToProps获得该功能。我知道redux部分正在工作,因为它以前已经存在,并且我没有更改它,所以我复制并粘贴了(所以起诉我)。我见过其他人有这个问题,通常这与他们有关,要么在呼叫结束时添加(),要么不使用this.props。在手。但是,这些似乎都无法解决问题。这是我的代码:
import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';
import React from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import WrappedNormalLoginForm from './Login'
import { connect } from 'react-redux'
import * as actions from '../store/actions/auth';
import UserDetailView from '../components/UserInformation'
const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;
class CustomLayout extends React.Component {
state = {
collapsed: false,
};
onCollapse = (collapsed) => {
console.log(collapsed);
this.setState({ collapsed });
}
render() {
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider
collapsible
collapsed={this.state.collapsed}
onCollapse={this.onCollapse}
>
<div className="logo" />
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
<Menu.Item key="1">
<NavLink to="/" activeClassName="is-active" exact={true}><Icon type="home" />
<span>Home</span></NavLink>
</Menu.Item>
{
this.props.isAuthenticated ?
<div><Button onClick={this.props.logout} >Logout</Button></div>
:
<div></div>
}
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }}>
{
this.props.isAuthenticated ?
<div><Button onClick={this.props.logout} >Logout</Button></div>
:
<WrappedNormalLoginForm/>
}
</Header>
<Content style={{ margin: '0 16px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
</Breadcrumb>
<div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
{this.props.children}
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>
</Footer>
</Layout>
</Layout>
);
}
}
const mapDispatchToProps = dispatch => {
return {
logout: () => dispatch(actions.logout())
}
}
export default withRouter(connect(null, mapDispatchToProps)(CustomLayout));