Question

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

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

Answer 1

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

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

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

扩展面板应展开onClicking按钮。反应材料

1 个答案: