Преобразование функционального компонента панели расширения в компонент класса

Я относительно новичок в реакции. Я пытался создать компонент класса для панели расширения аккордеона, которая находится в функциональном формате. У меня проблемы с изменением события 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>

);

}

Пожалуйста помоги!


reactjs material-ui event-handling react-state
person trek    schedule 27.08.2019    source источник
comment
useStyles - это ваш собственный хук?   -  person Atin Singh    schedule 27.08.2019
comment
@AtinSingh Я считаю, что это зацепка из материала ui = ›material-ui.com/styles/api < / а>   -  person Damian Busz    schedule 27.08.2019
comment
хорошо, позволь мне проверить   -  person Atin Singh    schedule 27.08.2019
comment
@DamianBusz только что проверил это. Ловушка объявляется сразу за пределами основного компонента, поэтому, оставив другой код таким, какой он есть, мы можем просто переместить эти классы const внутри рендеринга. Но я до сих пор не понимаю, зачем вы конвертируете этот функциональный компонент в класс   -  person Atin Singh    schedule 27.08.2019
comment
@AtinSingh Это отличный вопрос, я бы лично оставил его как функциональный компонент.   -  person Damian Busz    schedule 27.08.2019

Ответы (3)


arrow_upward
0
arrow_downward

Это будет так

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

Я думаю, это должно сработать ... кроме твоего собственного крючка, все хорошо.

person Atin Singh    schedule 27.08.2019
comment
Если useStyle не является вашим настраиваемым хуком, вы можете объявить эту const внутри рендера перед возвратом, как в ответе @Damian - person Atin Singh; 27.08.2019
comment
выдает ошибку: 'расширенный' не определен no-undef в строке ‹ExpansionPanel extended = {extended === 'panel1'} onChange = {this.handleChange ('panel1')}› - person trek; 27.08.2019
comment
о, да, моя беда, расширенная опора должна быть expanded={this.state.expanded === "panel1"} такой же, как и для панели2. - person Atin Singh; 27.08.2019
comment
отредактировал это. Между тем, если вы хотите его реорганизовать, вы можете деструктурировать свое состояние перед возвратом внутри функции рендеринга с помощью const { expanded } = this.state - person Atin Singh; 27.08.2019
comment
@trek без проблем. Ваше здоровье!! - person Atin Singh; 27.08.2019

arrow_upward
0
arrow_downward

Трудно сказать, какая у вас проблема, если вы не описываете ее должным образом или не доставляете весь код. Я написал ваш функциональный компонент в компонент класса, но я действительно не могу проверить, работает ли он или есть ли какие-либо проблемы с 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>
        )
    }
}
person Damian Busz    schedule 27.08.2019
comment
Правильно, плохо. Я забыл добавить this.state infront, поскольку он является частью состояния компонента класса. Я думаю, слишком привык к хукам :) Отредактировал код в посте, теперь должно быть хорошо - person Damian Busz; 27.08.2019
comment
Это сработало после замены расширенного = {расширенный === 'панель1'} на расширенный = {this.state.expanded === 'панель1'}. Спасибо! - person trek; 27.08.2019
comment
@trek Добро пожаловать. Если это правильный ответ, отметьте его как правильный ответ для людей, которые сталкиваются с подобной проблемой и могут найти эту вашу тему. Спасибо - person Damian Busz; 27.08.2019

arrow_upward

arrow_downward

person    schedule
comment
Санчари, спасибо за ответ! Может быть, вы можете отредактировать свой ответ, чтобы он был более пояснительным, чем ваш образец кода отличается от образца из вопроса и как он решает проблему? Это может помочь легче обнаружить основные изменения, чем сканирование всего кода. - person andi1984; 06.04.2020