Question

我正在使用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>

但是我面临一个问题，当我选中或取消选中复选框时，扩展面板会展开或折叠。由于该复选框，我想避免在扩展面板上执行任何操作。我该如何实现？

谢谢。

Answer 1

对于版本：“ @ material-ui / core”：“ 4.9.9”

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

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

Answer 2

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

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

Answer 3

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

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();}}
/>

Answer 4

如果您无法停止传播，这也将起作用，在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));
});

Answer 5

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>

材质用户界面-带有复选框的扩展面板

5 个答案: