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

Posted 2023-02-23

【中文标题】如何强制 MaterialUI 扩展面板不被扩展

【英文标题】：How to force a MaterialUI Expansion Panel not to be expanded

【发布时间】：2020-08-23 05:06:32

【问题描述】：

我正在寻找一种在扩展面板被禁用时强制扩展面板为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

怎么办？

谢谢！

【参考方案1】：

由于您希望能够禁用/启用面板以及展开/折叠设置 - 您需要转到受控面板。这意味着您需要有一个变量来保存展开/折叠的状态（可能还有面板的状态（启用/禁用）。

一旦用户禁用了面板 - 请确保此更改也会将 expand 的值设置为 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>
  );
;

一旦您在道具中获得disabled=true 值，通过将isExpanded 设置为false - 您可以确保即使您获得disabled=false - 面板仍处于折叠状态（用户现在可以展开再次）。

您可以在这里找到它的工作版本：https://codesandbox.io/s/controlled-panel-collapse-on-disable-1ejtt?file=/demo.js

【讨论】：

嗯，谢谢你的解决方案。请再做一件事。 isExpanded 如何保持实际值？我的应用程序在重新渲染组件时总是切换到false。我更新了演示：codesandbox.io/s/…

您还有其他问题吗？我不确定我是否理解。

是的，您的回答是正确的，但在我的应用程序中，我有一个奇怪的行为。扩展面板总是在几秒钟后自行关闭，我不明白为什么

你有机会从外部更新一些内容吗？如果是这样 - 这可能会导致重新渲染，这可能会重置您的一些变量。

是的，就是这样！如何预防？

【参考方案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>