Récupérer la valeur retournée par un handle

**totot** · 09/12/2018, 15h15

Bonjour,

Je suis entrain de créer un menu avec des sous menu. Lorsque je clique sur un item de mon menu, je veux que cela déroule mon sous menu.
https://material-ui.com/demos/lists/ : Section Nested List

Mon problème c'est que j'appel une fonction handle et je souhaite qu'elle me retourne une valeur mais j'ai l'erreur suivante :

But i have an error : Failed prop type: Invalid prop in of type function supplied to Collapse, expected `boolean

Mon Layout Dashboard :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
class APP extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mobileOpen: false,
      fixedClasses: "dropdown",
      user:JSON.parse(localStorage.getItem(USER_INFO)),
      listMenu:[]
    };
    this.handleFixedClick = this.handleFixedClick.bind(this);
    this.resizeFunction = this.resizeFunction.bind(this);
  }
 
  handleClick = (openSubMenu) => {
      this.setState({[openSubMenu] : true});
  };
 
  getOpenSubMenu = (event) => {
    const target = event.target;
    const id = target.id
    let menu = null;
    const listMenu = this.state.listMenu;
 
    for(var i = 0; i < listMenu.length; i++){
      if(_.isEqual(listMenu[i].code, id)){
        menu = listMenu[i];
      }
      break;
    }
    return menu.openSubMenu;
  };
 
  handleFixedClick() {
    if (this.state.fixedClasses === "dropdown") {
      this.setState({ fixedClasses: "dropdown show" });
    } else {
      this.setState({ fixedClasses: "dropdown" });
    }
  }
 
  handleDrawerToggle = () => {
    this.setState({ mobileOpen: !this.state.mobileOpen });
  };
 
  getRoute() {
    return this.props.location.pathname !== "/maps";
  }
 
  resizeFunction() {
    if (window.innerWidth >= 960) {
      this.setState({ mobileOpen: false });
    }
  }
 
  componentDidMount() {
    if (navigator.platform.indexOf("Win") > -1) {
      const ps = new PerfectScrollbar(this.refs.mainPanel);
    }
    window.addEventListener("resize", this.resizeFunction);
 
    {dashboardRoutes.map((prop, key) => {
      if(prop.subMenus != null){
        const menu = {
          code: prop.code,
          openSubMenu: false
        };
        this.setState(prevState => ({
          listMenu: [...prevState.listMenu, menu] 
        }));
      }
    })}
  }
 
  componentDidUpdate(e) {
    if (e.history.location.pathname !== e.location.pathname) {
      this.refs.mainPanel.scrollTop = 0;
      if (this.state.mobileOpen) {
        this.setState({ mobileOpen: false });
      }
    }
  }
 
  componentWillUnmount() {
    window.removeEventListener("resize", this.resizeFunction);
  }
 
  buildRoute(){
    return(
      <Switch>
        {dashboardRoutes.map((prop, key) => {
          if(prop.subMenus != null){
            {prop.subMenus.map((propSubMenu, keySubMenu) => {
              if (propSubMenu.redirect){  
                return <Redirect from={propSubMenu.path} to={propSubMenu.to} key={keySubMenu} />;
              }else if(propSubMenu.private){        
                return <PrivateRoute authenticated={JSON.parse(localStorage.getItem(IS_AUTHENTICATED))} path={propSubMenu.path} component={propSubMenu.component} key={keySubMenu} />;
              }else{
                return <Route path={propSubMenu.path} component={propSubMenu.component} key={keySubMenu} />;
              }
            })}
          }else{
            if (prop.redirect){  
              return <Redirect from={prop.path} to={prop.to} key={key} />;
            }else if(prop.private){         
              return <PrivateRoute authenticated={JSON.parse(localStorage.getItem(IS_AUTHENTICATED))} path={prop.path} component={prop.component} key={key} />;
            }else{
              return <Route path={prop.path} component={prop.component} key={key} />;
            }
          }
        })}
      </Switch>
    )
  }
 
  render() {
    const { classes, ...rest } = this.props;
    const {user} = this.state;
    let isAuthenticated = JSON.parse(localStorage.getItem(IS_AUTHENTICATED));
    let userPrenomNom = '';
 
    if(user != null)
      userPrenomNom = user.prenom + ' ' + user.nom;
 
    if(isAuthenticated === null)
      isAuthenticated = this.state.isAuthenticated;
 
    return (
      <div className={classes.wrapper}>
        <Sidebar
          routes={dashboardRoutes}
          logoText={"Creative Tim"}
          logo={logo}
          image={image}
          handleDrawerToggle={this.handleDrawerToggle}
          open={this.state.mobileOpen}
          color="blue"
          onClick={this.handleClick}
          openSubMenu={this.getOpenSubMenu}
          {...rest}
        />
 
        <div className={classes.mainPanel} ref="mainPanel">
          <Header
            isAuthenticated={isAuthenticated}
            user={userPrenomNom}
            routes={dashboardRoutes}
            handleDrawerToggle={this.handleDrawerToggle}
            {...rest}
          />
 
          {/* On the /maps route we want the map to be on full screen - this is not possible if the content and conatiner classes are present because they have some paddings which would make the map smaller */}
          {this.getRoute() ? (
            <div className={classes.content}>
              <div className={classes.container}>{this.buildRoute()}</div>
            </div>
          ) : (
            <div className={classes.map}>{this.buildRoute()}</div>
          )}
          {this.getRoute() ? <Footer /> : null}
          <FixedPlugin
            handleFixedClick={this.handleFixedClick}
            fixedClasses={this.state.fixedClasses}
          />
        </div>
      </div>
    );
  }
}
 
APP.propTypes = {
  classes: PropTypes.object.isRequired
};
 
export default withStyles(dashboardStyle)(APP);

Ma Sidebar :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
const Sidebar = ({ ...props }) => {
  // verifies if routeName is the one active (in browser input)
  function activeRoute(routeName) {
    return props.location.pathname.indexOf(routeName) > -1 ? true : false;
  }
 
  function buildListItemWithNavLink(prop, key, activePro, listItemClasses, whiteFontClasses){
    return (
      <div key={key}>
        <NavLink
          to={prop.path}
          className={activePro + classes.item}
          activeClassName="active"
          key={key}
        >
          <ListItem 
            button 
            className={ listItemClasses}
            onClick= {prop.subMenus != null ? props.onClick : null}
          >
            <ListItemIcon className={classes.itemIcon + whiteFontClasses}>
              {typeof prop.icon === "string" ? (
                <Icon>{prop.icon}</Icon>
              ) : (
                <prop.icon />
              )}
            </ListItemIcon>
            <ListItemText
              id={prop.code}
              primary={props.t(prop.sidebarName)}
              className={classes.itemText + whiteFontClasses}
              disableTypography={true}
            />
 
            {prop.subMenus != null ? props.openSubMenu ? <ExpandLess /> : <ExpandMore /> : null}
          </ListItem>
        </NavLink>
        {prop.subMenus != null ? (
          <Collapse in={props.openSubMenu} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              {prop.subMenus.map((propSubMenu, keySubMenu) => {
                if(propSubMenu.path !== undefined)
                  return buildListItemWithNavLink(propSubMenu, keySubMenu, activePro, listItemClasses, whiteFontClasses);
                else
                  return buildListItemWithoutNavLink(propSubMenu, whiteFontClasses);
              })}
            </List>
          </Collapse>
        ) : null}
      </div>
    );
  }
 
  function buildListItemWithoutNavLink(prop, key, activePro, listItemClasses, whiteFontClasses){
    return (
      <div key={key}>
          <ListItem 
            button 
            className={listItemClasses}
            onClick= {prop.subMenus != null ? props.openSubMenu : null}
          >
            <ListItemIcon className={classes.itemIcon + whiteFontClasses}>
              {typeof prop.icon === "string" ? (
                <Icon>{prop.icon}</Icon>
              ) : (
                <prop.icon />
              )}
            </ListItemIcon>
            <ListItemText
              id={prop.code}
              primary={props.t(prop.sidebarName)}
              className={classes.itemText + whiteFontClasses}
              disableTypography={true}
            />
 
            {prop.subMenus != null ? props.openSubMenu ? <ExpandLess /> : <ExpandMore /> : null}
          </ListItem>
        {prop.subMenus != null ? (
          <Collapse in={props.openSubMenu} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              {prop.subMenus.map((propSubMenu, keySubMenu) => {
                if(propSubMenu.path !== undefined)
                  return buildListItemWithNavLink(propSubMenu, keySubMenu, activePro, listItemClasses, whiteFontClasses);
                else
                  return buildListItemWithoutNavLink(propSubMenu, whiteFontClasses);
              })}
            </List>
          </Collapse>
        ) : null}
      </div>
    );
  }
 
  const { classes, color, logo, image, logoText, routes } = props;
  var links = (
    <List className={classes.list}>
      {routes.map((prop, key) => {
        if (prop.redirect) return null;
        var activePro = " ";
        var listItemClasses;
        listItemClasses = classNames({
          [" " + classes[color]]: activeRoute(prop.path)
        });
 
        const whiteFontClasses = classNames({
          [" " + classes.whiteFont]: activeRoute(prop.path)
        });
 
        if(prop.path !== undefined)
          return buildListItemWithNavLink(prop, key, activePro, listItemClasses, whiteFontClasses);
        else
          return buildListItemWithoutNavLink(prop, key, activePro, listItemClasses, whiteFontClasses);
      })}
    </List>
  );
  var brand = (
    <div className={classes.logo}>
      <a href="https://www.creative-tim.com" className={classes.logoLink}>
        <div className={classes.logoImage}>
          <img src={logo} alt="logo" className={classes.img} />
        </div>
        {logoText}
      </a>
    </div>
  );
  return (
    <div>
      <Hidden mdUp implementation="css">
        <Drawer
          variant="temporary"
          anchor="right"
          open={props.open}
          classes={{
            paper: classes.drawerPaper
          }}
          onClose={props.handleDrawerToggle}
          ModalProps={{
            keepMounted: true // Better open performance on mobile.
          }}
        >
          {brand}
          <div className={classes.sidebarWrapper}>
            <HeaderLinks />
            {links}
          </div>
          {image !== undefined ? (
            <div
              className={classes.background}
              style={{ backgroundImage: "url(" + image + ")" }}
            />
          ) : null}
        </Drawer>
      </Hidden>
      <Hidden smDown implementation="css">
        <Drawer
          anchor="left"
          variant="permanent"
          open
          classes={{
            paper: classes.drawerPaper
          }}
        >
          {brand}
          <div className={classes.sidebarWrapper}>{links}</div>
          {image !== undefined ? (
            <div
              className={classes.background}
              style={{ backgroundImage: "url(" + image + ")" }}
            />
          ) : null}
        </Drawer>
      </Hidden>
    </div>
  );
};
 
Sidebar.propTypes = {
  classes: PropTypes.object.isRequired
};
 
export default translate("langue")(withStyles(sidebarStyle)(Sidebar));

**totot** · 09/12/2018, 19h09

C'est la méthode getOpenSubMenu que j'appel pour qu'elle me retourne mon booléan

**gwyohm** · 10/12/2018, 08h58

Salut,

Le message d'erreur te dit que ta prop in doit prendre un booléen. Toi tu lui passes une fonction.
Ne devrais-tu pas lui passer le résultat de l'exécution de ta fonction ?

**totot** · 10/12/2018, 09h21

C'est ce que je cherche à faire mais j'y arrive pas

Récupérer la valeur retournée par un handle

React

Discussions similaires

Partager

Partager