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

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

PWA

Answer 2

会是这样

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

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

3 个答案: