将扩展面板功能组件转换为类组件

Question

我对反应比较陌生。我一直在尝试为下面的手风琴扩展面板创建一个功能格式的类组件。我无法根据类组件更改 handleChange 事件。我已经尝试了所有可能的方法，但我失败了。

 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

 const useStyles = makeStyles(theme => ({

 }));

 export default function ControlledExpansionPanels() {


 const classes = useStyles();

 const [expanded, setExpanded] = React.useState(false);


 const handleChange = panel => (event, isExpanded) => {
 setExpanded(isExpanded ? panel : false);
 };


  return (

  <div className={classes.root}>

  <ExpansionPanel expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>

   <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1bh-content"
      id="panel1bh-header"
    >


    </ExpansionPanelSummary>
    <ExpansionPanelDetails>

    </ExpansionPanelDetails>
  </ExpansionPanel>
  <ExpansionPanel expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
    <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel2bh-content"
      id="panel2bh-header"
    >

    </ExpansionPanelSummary>
    <ExpansionPanelDetails>

    </ExpansionPanelDetails>
  </ExpansionPanel>


</div>

);

}

请帮忙！

Answer 1

会是这样的

 export default class ControlledExpansionPanels extends React.Component {


 // const classes = useStyles();// // you can't use custom hook in class Component //

 const [expanded, setExpanded] = React.useState(false); // previous hook now not needed //

 state = { expanded: false }




handleChange = panel => (event, isExpanded) => {
 // setExpanded(isExpanded ? panel : false); // //previous state manager , now not needed //
 isExpanded ? this.setState({ expanded: panel}) : this.setState({ expanded: false }) //new state manager//
 };

render() {
  return (

  <div className={classes.root}>

  <ExpansionPanel expanded={this.state.expanded === 'panel1'} onChange={this.handleChange('panel1')}>

   <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1bh-content"
      id="panel1bh-header"
    >


    </ExpansionPanelSummary>
    <ExpansionPanelDetails>

    </ExpansionPanelDetails>
  </ExpansionPanel>
  <ExpansionPanel expanded={this.state.expanded === 'panel2'} onChange={this.handleChange('panel2')}>
    <ExpansionPanelSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel2bh-content"
      id="panel2bh-header"
    >

    </ExpansionPanelSummary>
    <ExpansionPanelDetails>

    </ExpansionPanelDetails>
  </ExpansionPanel>


</div> 
)}

我认为这应该可行.. 除了你自己的钩子一切都很好。

Answer 2

如果您没有正确描述或交付整个代码，很难说您有什么问题，我确实将您的功能组件写入类组件，但我无法真正检查它是否有效或者handleChange是否有任何问题。请检查并告诉我问题出在哪里，是否解决了您的问题。

export default class ControlledExpansionPanels extends Component {
    constructor(props){
        super(props)
        this.state = {expanded: false}
    }

    handleChange =  panel => (event, isExpanded) =>{
    if(isExpanded) {
        this.setState({expanded: panel})
    } else {
        this.setState({expanded: false})
    }

    }
    render() {
        const classes = useStyles();
        return (
            <div className={classes.root}>
            <ExpansionPanel
              expanded={this.state.expanded === "panel1"}
              onChange={() => this.handleChange("panel1")}
            >
              <ExpansionPanelSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1bh-content"
                id="panel1bh-header"
              ></ExpansionPanelSummary>
              <ExpansionPanelDetails></ExpansionPanelDetails>
            </ExpansionPanel>
            <ExpansionPanel
              expanded={this.state.expanded === "panel2"}
              onChange={() => this.handleChange("panel2")}
            >
              <ExpansionPanelSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel2bh-content"
                id="panel2bh-header"
              ></ExpansionPanelSummary>
              <ExpansionPanelDetails></ExpansionPanelDetails>
            </ExpansionPanel>
          </div>
        )
    }
}

Answer 3

import React from 'react';

export default class ControlledExpansionPanels extends Component {
constructor(props){
    super(props)
    this.state = {expanded: false}
}

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

}
render() {
    return (
        <div>
        <ExpansionPanel
          expanded={this.state.expanded === "panel1"}
          onChange={this.handleChange("panel1")}
        >
          <ExpansionPanelSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1bh-content"
            id="panel1bh-header"
          ></ExpansionPanelSummary>
          <ExpansionPanelDetails></ExpansionPanelDetails>
        </ExpansionPanel>
        <ExpansionPanel
          expanded={this.state.expanded === "panel2"}
          onChange={this.handleChange("panel2")}
        >
          <ExpansionPanelSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel2bh-content"
            id="panel2bh-header"
          ></ExpansionPanelSummary>
          <ExpansionPanelDetails></ExpansionPanelDetails>
        </ExpansionPanel>
      </div>
    )
}}