Material UI - 带有复选框的扩展面板答案

【问题标题】：Material UI - Expansion panel with checkboxMaterial UI - 带有复选框的扩展面板
【发布时间】：2019-03-17 00:10:32
【问题描述】：

我正在使用 Material-UI 进行 UI 设计。我正在使用一个带有复选框的扩展面板。

请在下面找到代码，

<ExpansionPanel 
    expanded={expanded === item.description} 
    onChange={this.handleChange(item.description)}
>
    <ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
        <Grid item xs={1}>
            <Checkbox
                value="checkedB"
                color="primary"
            />
        </Grid>
        <Grid item xs={2}>
            <Typography className={classes.heading}>
                {item.description}
            </Typography>
        </Grid>
        <Typography className={classes.desc}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Suspendisse malesuada lacus ex,
            sit amet blandit leo lobortis eget.
        </Typography>
    </ExpansionPanelSummary>
    <ExpansionPanelDetails>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Suspendisse malesuada lacus ex,
        sit amet blandit leo lobortis eget.
    </ExpansionPanelDetails>
</ExpansionPanel>

但我面临一个问题，当我选中或取消选中复选框时，展开面板会展开或折叠。由于该复选框，我想避免在扩展面板上执行任何操作。我怎样才能做到这一点？

提前致谢。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以简单地停止传播事件：

function handleClickCheckbox(e) {
  e.stopPropagation();
  // do something
}

...

<Checkbox value="checkedB"
          color="primary"
          onClick={e => handleClickCheckbox(e)}
/>

https://codesandbox.io/s/431284p0m0

或者更简单地说：

<Checkbox value="checkedB"
          color="primary"
          onClick={e => {e.stopPropagation();}}
/>

【讨论】：

【解决方案2】：

对于版本："@material-ui/core": "4.9.9"

如果您只将onClick 添加到expandIcon 您将失去所有要单击的面板摘要的空间，此外，并非所有用户一开始都会知道他们必须单击箭头图标才能出于这个原因，展开面板最好将 onClick 事件添加到 ExpansionPanelSummary，通过这样做，点击事件不会覆盖 ExpansionPanelDetails 并且整个 ExpansionPanelSummary 可以在任何地方单击并展开其正常行为/折叠。

<ExpansionPanel expanded={isExpanded}>
  <ExpansionPanelSummary expandIcon={<ExpandMore />} onClick={handleClickExpansion}>...</ExpansionPanelSummary>
  <ExpansionPanelDetails>....</ExpansionPanelDetails>
</ExpansionPanel>

【讨论】：

【解决方案3】：

const [expanded, setExpanded] = React.useState(false);

<Checkbox 
      value="checked"
      color="primary"
      onClick={() => setExpanded(!expanded)}
 />
<ExpansionPanel expanded={expanded}>
                <ExpansionPanelSummary
                    expandIcon={<ExpandMoreIcon />}
                    onClick={() => setExpanded(!expanded)}
                >
                 ON CLICK OPEN
                </ExpansionPanelSummary>
                <ExpansionPanelDetails>
                  IS OPEN
                </ExpansionPanelDetails>
            </ExpansionPanel>

【讨论】：

尝试添加有关您如何获得此解决方案的说明。

【解决方案4】：

不是您问题的直接答案。但是通过使用以下代码，您只能通过图标打开/关闭扩展面板

<ExpansionPanelSummary expandIcon={<ExpandMoreIcon onClick={() => {
               this.setState({
                 expansionPanelOpen: !this.state.expansionPanelOpen
               });
             }}/>}>
               ....

【讨论】：

好像不是这样...？如果你确定，你能提供更多细节吗？
这实际上帮助了我。只需将 expanded 属性添加到 ExpansionPanel 状态为 bool 的组件

【解决方案5】：

如果您无法停止传播，这也将起作用，在 ExpansionPanelSummary.js 的 material-ui 源代码中，您可以注释掉整个面板中的 onClick 操作并将其仅放置在按钮图标中

return React.createElement(ButtonBase, _extends({
    focusRipple: false,
    disableRipple: true,
    disabled: disabled,
    component: "div",
    "aria-expanded": expanded,
    className: clsx(classes.root, className, disabled && classes.disabled, expanded && classes.expanded, focusedState && classes.focused),
    onFocusVisible: handleFocusVisible,
    onBlur: handleBlur,
    //onClick: handleChange, This makes the entire expansion panel clickable
    ref: ref
  }, other), React.createElement("div", {
    className: clsx(classes.content, expanded && classes.expanded)
  }, children), expandIcon && React.createElement(IconButton, _extends({
    disabled: disabled,
    className: clsx(classes.expandIcon, expanded && classes.expanded),
    edge: "end",
    component: "div",
    onClick: handleChange, //put the onClick event here
    tabIndex: -1,
    "aria-hidden": true
  }, IconButtonProps), expandIcon));
});

【讨论】：