Question

我正在寻找一种在禁用扩展面板时将扩展面板强制为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 ?条件，因为进行了异步调用。参见react this.props undefined or empty object

怎么办？

谢谢！

Answer 1

public class SubCategory : Category , IEquatable<SubCategory>  
{
    public string parentCategory { get; set; }

    public SubCategory(string Name, string Id, string HomeCategory, bool inUse) : base(Name, Id, HomeCategory, inUse)
    {

    } 

    public bool Equals(SubCategory other)
    {
        return ((Category).this).Equals((Category)other)
    }
}

const [isExpanded, setIsExpanded] = React.useState(false);
const isDisabled = (props.body === null);

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

如何强制MaterialUI扩展面板不扩展

1 个答案: