Реакция материала на клик Свернуть [Ответ обновлен]

Question

У меня есть компонент с некоторым списком деталей. Каждый список в компоненте имеет кнопку Подробности. когда пользователь нажимает на кнопку. Он будет отображать дополнительную информацию для списка. Здесь я использую Material-Ui с реагировать и импортировал компонент Collapse для этой цели. Итак, как вы видите мой код ниже, когда я нажимаю кнопку детали в одном списке, он откроет детали для всего списка. Я хочу только открыть список, я нажимаю. Пожалуйста, проверьте мой код ниже

Заранее спасибо.

import React, { Component } from 'react';
import Collapse from '@material-ui/core/Collapse';
import Button from '@material-ui/core/Button';


class Collapsed extends Component {
    constructor(props){
        super(props);
        this.state = {
            expanded: {},
            details: [
                {
                    id: 0,
                    name: 'Tony Stark',
                    role: 'Iron Man' 
                },
                {
                    id: 1,
                    name: 'Steve Rogers',
                    role: 'Captain America',
                },
                {
                    id: 2,
                    name: 'Thor',
                    role: 'God of Thunder'
                }
            ]
        }
    }
    handleExpandClick = (id) => {
        const expended = this.state.expended;
        expended[id] = expended.hasOwnProperty(id) ? !expended[id] : true
        this.setState({ expended });
      }
  render() {
      const { details, expanded } = this.state;
    return (
      <div>
        {details.map((detail)=>(
            <div key={detail.id}>
                {detail.name}
                <Button 
                    variant="contained"
                    disableRipple  
                    onClick={() => this.handleExpandClick(detail.id)}
                    aria-expanded={expanded}
                    aria-label="Show more"
                >
                    Details
                </Button>
                <Collapse in={expanded[detail.id]} timeout="auto" unmountOnExit>
                    {detail.role}
                </Collapse>
            </div>    
        ))}
      </div>
    )
  }
}

export default Collapsed

Answer 1

Вместо того, чтобы использовать одну переменную для хранения «израсходованного» значения в качестве логического значения, вы можете использовать объект с идентификатором каждой детали.

    import React, { Component } from 'react';
import Collapse from '@material-ui/core/Collapse';
import Button from '@material-ui/core/Button';


class Collapsed extends Component {
    constructor(props){
        super(props);
        this.state = {
            expanded: {},
            details: [
                {
                    id: 0,
                    name: 'Tony Stark',
                    role: 'Iron Man' 
                },
                {
                    id: 1,
                    name: 'Steve Rogers',
                    role: 'Captain America',
                },
                {
                    id: 2,
                    name: 'Thor',
                    role: 'God of Thunder'
                }
            ]
        }
    }
    handleExpandClick = (id) => {
        this.setState({ expanded: ...this.state.expanded, [id] : true });
      };
  render() {
      const {details, expanded} = this.state;
    return (
      <div>
        {details.map((detail)=>(
            <div key={detail.id}>
                {detail.name}
                <Button 
                    variant="contained"
                    disableRipple  
                    onClick={()=>this.handleExpandClick(detail.id)}
                    aria-expanded={expanded}
                    aria-label="Show more"
                >
                    Role
                </Button>
                <Collapse in={expanded[detail.id]} timeout="auto" unmountOnExit>
                    {detail.role}
                </Collapse>
            </div>    
        ))}
      </div>
    )
  }
}

export default Collapsed

Если вы хотите иметь возможность закрыть израсходованное значениеподробно вы можете использовать функцию ручки, как:

handleExpandClick = (id) => {
  let expended = this.state.expended;
  expended = expended.hasOwnProperty(id) ? !expended[id] : true
  this.setState({ expended });
}

Answer 2

Попробуйте это

import React, { Component } from 'react';
import Collapse from '@material-ui/core/Collapse';
import Button from '@material-ui/core/Button';
import _ from 'lodash';

class Collapsed extends Component {
    constructor(props) {
        super(props);
        this.state = {
            details: [
                {
                    id: 0,
                    name: 'Tony Stark',
                    role: 'Iron Man'
                },
                {
                    id: 1,
                    name: 'Steve Rogers',
                    role: 'Captain America',
                },
                {
                    id: 2,
                    name: 'Thor',
                    role: 'God of Thunder'
                }
            ]
        }
    }
    handleExpandClick(id) {
        console.log(this.state[`expanded_${id}`]);
        this.setState({ [`expanded_${id}`]:  _.isUndefined(this.state[`expanded_${id}`])?true:!this.state[`expanded_${id}`] });
    };
    render() {
        const { details, expanded } = this.state;
        return (
            <div>
                {details.map((detail) => (
                    <div key={detail.id}>
                        {detail.name}
                        <Button
                            variant="contained"
                            disableRipple
                            onClick={this.handleExpandClick.bind(this,detail.id)}
                            aria-expanded={this.state[`expanded_${detail.id}`] || false}
                            aria-label="Show more"
                        >
                            Role
                </Button>
                        <Collapse in={this.state[`expanded_${detail.id}`] || false} timeout="auto" unmountOnExit>
                            {detail.role}
                        </Collapse>
                    </div>
                ))}
            </div>
        )
    }
}

export default Collapsed