0
votes

Comment puis-je passer une variable aux classes des enfants et la modifier?

Je souhaite faire une page avec une barre d'outils en haut qui détermine quelle page le corps affiche. J'ai défini une variable appelée "pageactive" qui est détenue dans l'état de la classe d'application.

Le parent est-ce. P> xxx pré>

et l'enfant est-ce. P>

   class LeagueToolbar extends Component {

    constructor(props) {
        super(props);

        this.state = {
            menuPosition: null,
        };

    }

    handleClick = (event) => {
        this.setState({ menuPosition: event.currentTarget });
    }

    handleClose = () => {
        this.props.changePageActive(2); // does not work
        this.setState({ menuPosition: null });
    }

    render() {
        return (
            <div >
                <AppBar position="static">
                    <Toolbar>
                        <IconButton edge="start" color="inherit" aria-label="Menu"
                                    onClick={this.handleClick} >
                            <MenuIcon />
                        </IconButton>
                        <Menu
                            id="simple-menu"
                            anchorEl={this.state.menuPosition}
                            anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
                            getContentAnchorEl={null}
                            keepMounted
                            open={Boolean(this.state.menuPosition)}
                            onClose={this.handleClose}
                        >
                            <MenuItem onClick={this.handleClose}>League Summary</MenuItem>
                            <MenuItem onClick={this.handleClose}>History</MenuItem>
                            <MenuItem onClick={this.handleClose}>Admin</MenuItem>
                        </Menu>

                        <Typography variant="h6" >
                            {(function(){
                                switch(this.props.pageActive) { // does not work
                                    case 1:
                                        return <div>option1</div>;
                                    case 2:
                                        return <div>option2</div>;
                                }
                            })}
                        </Typography>

                    </Toolbar>
                </AppBar>
            </div>
        );
    }
}

export default LeagueToolbar;

reactjs

3 commentaires

Selon votre liste de code, vous passez à la section The ChangePageActive PROP vers Leaguebody Composant mais essayant de l'utiliser dans LeaetoolBar .


                                        
                                                                            Vous ne passez pas la fonction  changepageactive  à  Leaetoolbar . Il y a aussi un problème avec votre commutateur dans le rendu.

                                        
                                                                            Merci, je ne reçois plus l'erreur de fonction, mais je ne peux toujours pas lire la variable pageactive dans les classes enfants



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     erreur passe fonctionne-définition de fonction dans JSX de  Leaetoolbar , c'est la solution:  xxx                                  


                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Donc, il n'est pas possible de passer une variable? Passez-vous la fonction GET?                                                
                                                
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Le bug principal est ici:  xxx  pré> 
 vous déclarez fonction anonyme  (fonction () {.....})  code> Mais vous n'avez pas appelé. Ajoutez simplement des crochets ronds et en plus à la fin -  (fonction () {.....} ())  code> ou comme @ avinash-mahlawat proposé - déplacez ce code dans une méthode de classe distincte. Cela vous fera que le code est plus lisible.  P> 
 et n'oubliez pas de passer Changepageactive à LeaToolBar  P> 
<LeagueToolbar pageActive={this.state.pageActive} changePageActive={this.changePageActive}/>

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     première passe  changepageactive = {this.changepageactive}  code> comme accessoires sur  Leaetoolbar  code> composant  xxx  pré> 
 et vous devez également appeler la fonction anonyme Ie à l'aide de l'instruction de commutation dans  Render  code> méthode. Puisque vous ne fournissez que la référence de fonction qu'il ne fonctionnera pas.  p> 
 Utilisez également la fonction de flèche pour lier  ceci  code>.  p> 
 I.e.  P> 
{() => {
     switch(this.props.pageActive) { 
        case 1:
          return <div>option1</div>;
        case 2:
          return <div>option2</div>;
      }
}()} // calling the function

                                

                                                                    
                                    
                                    
                                        0 commentaires