Пользовательский интерфейс материала - панель расширения с флажком

Question

Я использую Material-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

Вы можете просто прекратить распространение события:

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 2

Не прямой ответ на ваш вопрос. Но используя следующий код, вы можете открывать / закрывать панель расширения только через значок

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

Answer 3

Для версии: "@material-ui / core": "4.9.9"

Если вы добавите onClick только для expandIcon вы потеряете все пространство сводки панели, на которую можно щелкнуть, кроме того, не все пользователи сначала узнают, что им нужно щелкнуть значок стрелки, чтобы развернуть панель, по этой причине лучше добавить событие onClick в то ExpansionPanelSummary, при этом событие click не будет охватывать ExpansionPanelDetails и весь ExpansionPanelSummary может иметь нормальное поведение: щелкнуть где угодно и развернуть / свернуть.

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

Answer 4

      const [expanded, setExpanded] = React.useState(false);
            
<ExpansionPanel expanded={expanded}>
                <ExpansionPanelSummary
                    expandIcon={<ExpandMoreIcon />}
                    onClick={() => setExpanded(!expanded)}
                >
                 ON CLICK OPEN
                </ExpansionPanelSummary>
                <ExpansionPanelDetails>
                  IS OPEN
                </ExpansionPanelDetails>
            </ExpansionPanel>

Answer 5

Это также будет работать, если вы не сможете остановить распространение, в исходном коде material-ui из ExpansionPanelSummary.js вы можете закомментировать действие 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));
});