1

我有一个带有扩展面板的组件。现在，当用户单击展开摘要面板时，它将展开详细内容。我想要实现的是，我在每个扩展的详细信息内容中都有一个名为“下一步”的按钮。因此，每当用户单击下一个按钮时。它应该关闭当前展开的面板并展开下一个面板。

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);
4

1 回答 1

0

你的例子根本不是递归的，但也许你有你的理由。好吧，当您使用字符串来检查面板展开状态时，您可以使用一种方法，将下一个面板的字符串作为参数，如下所示：

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 demo

同样，您的示例不是递归的，我建议为此使用循环，但如果这足以满足您的需要，那就这样吧:)

于 2019-06-11T19:52:04.320 回答