Панели расширения должны расширяться при нажатии кнопки | Реагировать Материал - PullRequest
Новая
       16

Панели расширения должны расширяться при нажатии кнопки | Реагировать Материал

0 голосов
/ 11 июня 2019

У меня есть компонент с панелями расширения.Теперь он будет расширять подробный контент, когда пользователь нажимает на сводную панель расширения.Чего я хочу добиться, так это того, что у меня есть кнопка «Далее» в каждом расширенном содержании.Таким образом, каждый раз, когда пользователь нажимает на следующую кнопку.Он должен закрыть текущую расширенную панель и развернуть следующую. 

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/Event';
import styles from '../../../../assets/css/style.js';

class Content extends React.Component {
  state = {
    expanded: null,
  };

  handleChange = panel => (event, expanded) => {
    this.setState({
      expanded: expanded ? panel : false,
    });
  };

  render() {
    const { classes } = this.props;
    const { expanded } = this.state;
    return (
      <div className={classes.contentRoot}>
        <ExpansionPanel expanded={expanded === 'panel1'} onChange={this.handleChange('panel1')} className={classes.expansionRoot}>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} classes= {{ root: classes.expand, expandIcon: classes.expandMore}}>
            <Typography className={classes.heading} >One </Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails className={classes.expansionDetails}>
            Content
              <Button variant="outlined">Next</Button>
          </ExpansionPanelDetails>
        </ExpansionPanel>
        <ExpansionPanel expanded={expanded === 'panel2'} onChange={this.handleChange('panel2')} className={classes.expansionRoot}>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} classes= {{ root: classes.expand, expandIcon: classes.expandMore}}>
            <Typography className={classes.heading}>Two</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails className={classes.expansionDetails}>
            Content
              <Button variant="outlined">Next</Button>
          </ExpansionPanelDetails>
        </ExpansionPanel>
        <ExpansionPanel expanded={expanded === 'panel3'} onChange={this.handleChange('panel3')} className={classes.expansionRoot}>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} classes= {{ root: classes.expand, expandIcon: classes.expandMore}}>
            <Typography className={classes.heading}>Three</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails className={classes.expansionDetails}>
              Content
              <Button variant="outlined">Next</Button>
          </ExpansionPanelDetails>
        </ExpansionPanel>
        <ExpansionPanel expanded={expanded === 'panel4'} onChange={this.handleChange('panel4')} className={classes.expansionRoot}>
        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} classes= {{ root: classes.expand, expandIcon: classes.expandMore}}>
            <Typography className={classes.heading}>Four</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails className={classes.expansionDetails}>
           Content
              <Button variant="outlined">Next</Button>
          </ExpansionPanelDetails>
        </ExpansionPanel>
        <ExpansionPanel expanded={expanded === 'panel5'} onChange={this.handleChange('panel5')} className={classes.expansionRoot}>
        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} classes= {{ root: classes.expand, expandIcon: classes.expandMore}}>
            <Typography className={classes.heading}>Five</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails className={classes.expansionDetails}>
              Content
              <Button variant="outlined">Next</Button>
          </ExpansionPanelDetails>
        </ExpansionPanel>
      </div>
    );
  }
}

Content.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Content);

1 Ответ

0 голосов
/ 11 июня 2019

Ваш пример не является рекурсивным, но, возможно, у вас есть свои причины.Итак, поскольку вы используете строки для проверки расширенного состояния панели, вы можете использовать метод, который принимает в качестве параметра строку следующей панели, что-то вроде этого: 

handleButtonClick = nextPanelString => (event, expanded) => {
    this.setState({
      expanded:  nextPanelString,
    });
  };

Затем в методе рендеринга: 

<ExpansionPanel expanded={expanded === 'panel1'} onChange={this.handleChange('panel1')} className={classes.expansionRoot}>
          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} classes= {{ root: classes.expand, expandIcon: classes.expandMore}}>
            <Typography className={classes.heading} >One </Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails className={classes.expansionDetails}>
            Content
              <Button onClick={this.handleButtonClick('panel2')} variant="outlined">Next</Button>
          </ExpansionPanelDetails>
        </ExpansionPanel>

вот рабочий пример Stackblitz: демонстрация stackblitz

Опять же, ваш пример не рекурсивный, я рекомендовал бы использовать цикл для этого, но если этого достаточно для вашеготак и должно быть :)

...