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

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

0 голосов
/ 11 октября 2018

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

Но я сталкиваюсь с одной проблемой, когда я устанавливаю или снимаю флажок, панель расширения расширяетсяили свернуть.Я хочу избежать каких-либо действий на панели расширения из-за флажка.Как мне этого добиться?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 26 января 2019

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

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();}}
/>
0 голосов
/ 11 октября 2018

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

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