Я ищу способ заставить панель расширения на expanded=false, когда панель расширения отключена. Представьте себе расширенную панель расширения. Происходит событие, и панель расширения переключается в отключенное состояние. Моя проблема в том, что он все еще расширен. Я хочу форсировать expanded=false, но я не знаю, как это сделать.

Вот мой код:

return (


<ExpansionPanel disabled={props.body==null} >
  <ExpansionPanelSummary
  expandIcon={<ExpandMoreIcon />}
  id="panel1a-header"
  classes={{
    content: classes.spaced,
  }}
  >
    <Box fontWeight="fontWeightBold">{props.name}</Box>
    <Box fontWeight="fontWeightBold" className={props.hasError ? classes.error : classes.ok}>
      {props.hasError ? 'DOWN' : 'UP'}
    </Box>
  </ExpansionPanelSummary>
  <ExpansionPanelDetails 
  classes={{
    root: classes.rowSpaced
    }}>
      {
      props.body != null && props.body.checks != null ?

      <Box>
        <List
      component="nav"
      aria-labelledby="nested-list-subheader"
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">Liveness</ListSubheader>
      }
      className={classes.root}
      >
        <ListItem>
          <ListItemText>
            <Box display="flex" flexDirection="row" className={classes.spaced}>
              <Typography key={props.body.checks[0].name}>{props.body.checks[0].name}</Typography>
              <Typography key={props.body.checks[0].name + props.body.checks[0].status} className={props.body.checks[0].status === 'UP' ? classes.ok : classes.error}>
                {props.body.checks[0].status}
              </Typography>
            </Box>
          </ListItemText>
        </ListItem>
      </List>

      <Divider />
      <List
      component="nav"
      aria-labelledby="nested-list-subheader"
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          Readyness
        </ListSubheader>
      }
      className={classes.root}
      >
        {
        props.body != null && props.body.checks != null ? props.body.checks.slice(1).sort((a, b) => (a.name > b.name) ? 1 : -1).map((check, i) => (

        <ListItem key={check.name + check.status}>
          <ListItemText>
            <Box display="flex" flexDirection="row" className={classes.spaced}>
              <Typography key={check.name}>{check.name}</Typography>
              <Typography key={check.name + check.status}  className={check.status === 'UP' ? classes.ok : classes.error}>
               {check.status}
              </Typography>
            </Box>
          </ListItemText>
        </ListItem>
        )) : null
        }
      </List>

      </Box>

      : null
      }


    </ExpansionPanelDetails>
  </ExpansionPanel>
  );

Если props.body==null, то панель расширения должна быть disabled=true И expanded=false, потому что я не хочу расширять ее, когда она отключена ... Если this.props.body!=null, то я хочу позволить пользователю щелкнуть по нему, чтобы развернуть, как он хочет.

Обратите внимание на условие props.body != null && props.body.checks != null ?, потому что сделан асинхронный вызов. См. отреагировать this.props неопределенным или пустым объектом

Как сделать ?

Спасибо !

1
bertranddeweer 7 Май 2020 в 21:56

2 ответа

Лучший ответ
const [isExpanded, setIsExpanded] = React.useState(false);
const isDisabled = (props.body === null);

React.useEffect(() => {
  if(isExpanded && isDisabled) {
    setIsExpanded(false);
  }
}, [isExpanded, isDisabled]);
<ExpansionPanel disabled={isDisabled} expanded={isExpanded && !isDisabled} onChange={() => setIsExpanded(!isExpanded)}>
....
</ExpansionPanel>
0
Community 9 Май 2020 в 00:09

Так как вы хотите иметь возможность отключать / включать панель, а также параметры развертывания / свертывания - вам нужно будет перейти к контролируемой панели. Это означает, что вам нужно иметь переменную, которая сохраняет состояние раскрытия / свертывания (и, возможно, также состояние панели (включено / отключено).

После того, как у пользователя появится панель, которая отключена - убедитесь, что это изменение также установит значение раскрытия в false:

const MyControlledPanel = props => {
  const { children, disabled } = props;
  const [isExpanded, setIsExpanded] = React.useState(false);

  const handleChange = () => {
    setIsExpanded(!isExpanded);
  };

  React.useEffect(() => {
    if (disabled) {
      setIsExpanded(false);
    }
  }, [disabled]);

  return (
    <ExpansionPanel
      disabled={disabled}
      expanded={isExpanded}
      onChange={handleChange}
    >
      {children}
    </ExpansionPanel>
  );
};

Установив isExpanded в значение false, как только вы получите значение disabled=true в опоре - вы убедитесь, что даже если вы получите disabled=false - панель все еще свернута (и теперь пользователь будет смог снова его расширить).

Вы можете найти здесь рабочую версию этого: https://codesandbox.io/s/controlled-panel-collapse-on-disable-1ejtt?file=/demo.js

1
Dekel 7 Май 2020 в 21:17