3

我是比较新的反应。我一直在尝试为下面的手风琴扩展面板创建一个功能格式的类组件。我无法根据类组件更改 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>

);

}

请帮忙！

4

3 回答 3

0

Its hard to say what issue you have if you dont describe it properly or deliver entire code, I did write your functional component into class component but I can't really check if it works or if there is any problem with handleChange. Please check and let me know what is the issue and if it corrected your problem.

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>
        )
    }
}
于 2019-08-27T07:35:11.037 回答
0

会是这样

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

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

于 2019-08-27T07:36:06.637 回答
0 
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>
    )
}}
于 2020-04-06T07:37:40.897 回答