Question

我已经看到了通过传递函数并在子代中更新它来更改父代状态的各种方法。我已成功向下传递了该函数，但是，父控件的状态在onClick事件上不会更改。正如我在console.log中所看到的，父组件确实会重新渲染。另外，我将功能组件用作子组件，但是，我确实尝试将其更改为基于类的组件，但没有运气（不要失去我的魅力）。这是父组件：

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import Icon from '@material-ui/core/Icon';
import { Grid, Paper } from '@material-ui/core'
import SideNavBar from '../containers/SideNavBar';
const styles = {
    list: {
        width: 250,
    },
    fullList: {
        width: 'auto',
    },
};
class Header extends React.Component {
    state = {
        left: false
    }
    toggleDrawer = (side, open) => () => {
        this.setState({
            [side]: open,
        });
    };
    render() {
        console.log(this.state)
        const { classes } = this.props;
        const sideList = (
            <SideNavBar toggleDrawer={this.toggleDrawer} />
        );
        return (
            <div>
                {console.log(this.state)}
                <div className='headerroot'>
                    <Grid container spacing={0}>
                        <Grid item sm={1} xl={1}>
                            <div className='headericondiv'>
                                <i className="material-icons md-24" onClick={this.toggleDrawer('left', true)}>dehaze</i>
                            </div>
                            <SwipeableDrawer
                                open={this.state.left}
                                onClose={this.toggleDrawer('left', false)}
                                onOpen={this.toggleDrawer('left', true)}
                            >
                                <SideNavBar toggleDrawer={this.toggleDrawer} />
                            </SwipeableDrawer>
                        </Grid>
                        <Grid item xs>
                            <div className='headertitle'>Solutions Hub</div>
                        </Grid>
                        <Grid item xs>
                        </Grid>
                    </Grid>
                    <div className='sitetop' />




                </div>

            </div>
        )
    }
}


export default withStyles(styles)(Header);

还有孩子：

import React, { useState, useEffect } from 'react';
import Paper from '@material-ui/core/Paper';
import SideBarNavLink from './SideBarNavLink'
import { withRouter } from 'react-router-dom'
import LogoutButton from '../usercomponents/LogoutButton';
import { Link } from 'react-router-dom'

const SideNavBar = (props) => {
    const [ticketLinks, openTicketLinks] = useState(false)
    const [adminLinks, openAdminLinks] = useState(false)
    let ticketNav, adminNav = null
    if (ticketLinks) {
        ticketNav = (
            <div>
                ticketLinks
            </div>
        )
    }
    if (adminLinks) {
        adminNav = (
            <div>
                adminNav
            </div>
        )
    }
    const closeDrawer = () => props.toggleDrawer('left', false)
    console.log(props.toggleDrawer)
    return (
        <React.Fragment>
            <div className='linksroot'>
                <Link to='/' onClick={closeDrawer}>
                    <div className='iniitiallink' >
                        Home
                    </div>
                </Link>
                <Link to='/createticket/' >
                    <div className='iniitiallink'>
                        Create a Ticket
                </div>
                </Link>
                <div className='iniitiallink'>
                    My Open Tickets
            </div>
                <div className='iniitiallink' onClick={() => openTicketLinks(!ticketLinks)}>
                    Tickets
            </div>
                <div>
                    {ticketNav}
                </div>
                <div className='iniitiallink' onClick={() => openAdminLinks(!adminLinks)}>
                    Admin
            </div>
                <div>
                    {adminNav}
                </div>
                <div className='buttonroot' style={{
                    paddingBottom: '1.2rem',
                    paddingLeft: '1.2rem'
                }}>
                    <LogoutButton />
                </div>
            </div>
        </React.Fragment>
    );
}

export default withRouter(SideNavBar)

Answer 1

toggleDrawer是一个返回函数的函数。因此，请尝试使用const closeDrawer = () => props.toggleDrawer('left', false)而不是const closeDrawer = props.toggleDrawer('left', false)。

父状态未从子组件功能更改

1 个答案: